JSFiddle - React, Tailwind, and code Playground

by Raphael Quintao

HTML

<div id="ovo">
  <form>
    <input type="number" value="1300" autofocus>
  </form>
</div>
<div id="t1"></div>
<div id="t2"></div>

CSS

#t1,
#t2 {
  width: 100px;
  height: 100px;
  position: absolute;
  right: 0;
}

#t1 {
  background-color: red;
  top: 0;
  animation-timing-function: linear;
}

#t2 {
  background-color: rebeccapurple;
  top: 110px;
}

.anim {
  animation-name: example;
  animation-duration: 3s;
}

@keyframes ok {
  0% {
    right: 0px;
  }
  50% {
    right: 50px;
  }
  100% {
    right: 100px;
  }
}


/* Standard syntax */

@keyframes example {
  0% {
    right: 0px;
  }
  25% {
    right: 100px;
  }
  50% {
    right: 100px;
  }
  75% {
    right: 0px;
  }
  100% {
    right: 0px;
  }
}

#ovo input {}

JavaScript

function main(duration) {
  $("#ovo form").submit(function(event) {
    event.preventDefault();
    var duration = $("#ovo form input").val();
    animate(duration);
    $("#t1").css('animation-duration', duration + 'ms').
    css('animation-name', 'ok');
    setTimeout(function() {
      $("#t1").css('animation-duration', '').css('animation-name', '');
    }, duration);
  });
}


function animate(duration) {
  $("#t2").animate({
    right: "100px"
  }, duration/2, 'linear', function() {
    $("#t2").animate({
      right: "-=100px"
    }, duration/2, 'linear');
  });
}






$(document).ready(function() {
  main();
});