black_yurizan black_yurizan - 5 months ago 21
Javascript Question

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>




Answer

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>

Comments