CODEWITHSUNDEEP
javascriptcss
black_yurizan
black_yurizan

Reputation: 437

How do you use css keyframes animations with javascript

Is there a way to make an object move with CSS keyframes by adding the animate property to a class. So that when you click on a certain button the class will be attached to the object, thus creating an animation? Here is the code for it

function start(){
  document.getElementById('up').onclick = function() {
    document.getElementById('red').className = "uppy";
  };

  document.getElementById('do').onclick = function() {
    document.getElementById('red').className = "downy";
  };
}

start();
#area {
  height: 400px;
  width: 400px;
  border: 1px solid black;
}
#red {
  height: 25px;
  width: 25px;
  background: red;
}
#btn-row { margin-top: 20px; }

div.downy {
  -moz-animation: down 1s;
  animation: down 1s;
}

div.uppy {
  -moz-animation: up 1s;
  animation: up 1s;
}

@keyframes down {
  from { top: 0; }
  to {top:5 0px; }
}

@-moz-keyframes down {
  from { top: 0; }
  to { top: 50px; }
}

@keyframes up {
  from { bottom: 0; }
  to { bottom: 50px; }
}

@-moz-keyframes up {
  from { bottom: 0; }
  to { bottom: 50px; }
}
<div id="area">
  <div id="red"></div>
</div> 
<div id="btn-row">
  <button id="up">Up</button>
  <button id="do">Down</button>
</div>

Upvotes: 1

Views: 81

Answers (2)

Ehsan
Ehsan

Reputation: 12951

change javascript to :

<script>
        function start() {
              document.getElementById('up').onclick = function(){
                 document.getElementById('red').className = "uppy";
              }

              document.getElementById('do').onclick = function(){
                document.getElementById('red').className = "downy";

            }
        }
        window.onload =start;

    </script>

insert 'position:relative;' to #red in css to :

#red{ height:25px; width:25px; background:red; position:relative;}

Upvotes: 0

guest271314
guest271314

Reputation: 1

Set position to relative at #red element, animation-fill-mode to forwards at .downy

function start() {
  document.getElementById('up').onclick = function() {
    document.getElementById('red').className = "uppy";
  };

  document.getElementById('do').onclick = function() {
    document.getElementById('red').className = "downy";
  };
}

window.onload = start;
#area {
  height: 400px;
  width: 400px;
  border: 1px solid black;
}
#red {
  height: 25px;
  width: 25px;
  background: red;
  position:relative;
}
#btn-row {
  margin-top: 20px;
}

div.downy {
  -moz-animation: down 1s;
  animation: down 1s;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
div.uppy {
  -moz-animation: up 1s;
  animation: up 1s;
}
@keyframes down {
  from {
    top: 0px;
  }
  to {
    top: 50px;
  }
}
@-moz-keyframes down {
  from {
    top: 0px;
  }
  to {
    top: 50px;
  }
}
@keyframes up {
  from {
    bottom: 0;
  }
  to {
    bottom: 50px;
  }
}
@-moz-keyframes up {
  from {
    bottom: 0;
  }
  to {
    bottom: 50px;
  }
}
<div id="area">
  <div id="red"></div>

</div>
<div id="btn-row">
  <button id="up">Up</button>
  <button id="do">Down</button>
</div>

Upvotes: 1

Related Questions