JSFiddle - React, Tailwind, and code Playground

by ruisoftware

HTML

<div>
  this is my div            
</div>

<button id="1">1</button>
<button id="2">2</button>
<button id="3">3</button>
<button id="pause">pause</button>
<button id="stop">stop</button>
<header></header>

CSS

div {
    width: 200px;
    height: 150px;
    background-color: red;
    position: absolute;
    left: 100px;
    top: 50px;
    
    -webkit-animation: movie 10s linear 1s;
    -moz-animation: movie 5s linear 2s;
    -o-animation: movie 5s linear 2s;
    animation: movie 5s linear 2s;
}

@-webkit-keyframes movie {
    0%   {background: red; left:0px; top:0px;}
    5%  {background: yellow; left:200px; top:0px;}
    
    75%  {background: yellow; left:200px; top:0px;}
    100% {background: red; left:0px; top:0px;}
}

@-moz-keyframes movie {
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

@-o-keyframes movie {
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

@keyframes movie {
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

div.move1 {
    -webkit-transform: translateX(86px);
}

div.move2,
div.move3 {
    -webkit-transform: translateX(10px);
}

.anim-paused {
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

JavaScript

$("button#1").click(function () {
    $("div").toggleClass('move1');
    $("header").text($("div").attr('class'));
});
$("button#2").click(function () {
    $("div").toggleClass('move2');
    $("header").text($("div").attr('class'));
});
$("button#3").click(function () {
    $("div").toggleClass('move3');
    $("header").text($("div").attr('class'));
});

$("button#pause").click(function () {
    $("div").toggleClass('anim-paused');
    $("header").text($("div").attr('class'));
});
$("button#stop").click(function () {
    $("div").toggleClass('paused');
    $("header").text($("div").attr('class'));
});

$("div")[0].addEventListener( 'webkitTransitionEnd', 
    function( event ) { alert( $("div").position().left ); }, false );