JSFiddle - React, Tailwind, and code Playground

by duopixel

HTML

<div id="stage">
    <div id="element"></div>
</div>


<select id="type">
    <option value="ease-in-out">ease-in-out</option>
    <option value="linear">linear</option>
    <option value="ease">ease</option>
    <option value="ease-in">ease-in</option>
</select>
<button id="start">Start transition</button><button id="reset">Reset</button>

CSS

#element {
  background-color: #c00;
  height: 100px;
  width: 100px;
-webkit-transition: all ease-in-out 1s;
-moz-transition: all ease-in-out 1s;
}

#element.move {
margin-left: 400px;
}

JavaScript

$("#reset").click(function(){
  $("#element").removeClass("move");
});

$("#start").click(function(){
  $("#element").addClass("move");
  var timingFunction = $("#type").attr('value');
  $("#element").css("-webkit-transition-timing-function", timingFunction);
  $("#element").css("-moz-transition-timing-function", timingFunction);
});