JSFiddle - React, Tailwind, and code Playground

animation scripting

by CBroe

HTML

<div id="square"></div>
<button id="move">Move!</button>

CSS

div { position:absolute; left:50%; width:100px; height:100px; margin-left:-50px; background:blue; -webkit-animation: 4s linear 0s infinite alternate move paused; }

@-webkit-keyframes move {
  0% { transform:translateY(0%); }
  50% { transform:translateY(200px); }
  100% { transform:translateY(270px); }
}

JavaScript

var d = -2;
document.getElementById("move").onclick = function() {
d-=.75;
console.log(d)
document.getElementById("square").style.webkitAnimationDelay=d+"s";
document.getElementById("square").style.webkitAnimationPlayState = "running";
}