JSFiddle - React, Tailwind, and code Playground

by Mukul kant

HTML

<h1>CSS3 Animation</h1>
    <div class="square"></div>

CSS

.square {
    border: 3px solid black;
    height: 50px;
    width: 50px;
    clear: both;


    -webkit-animation: keyframeMoveDiv 5s; /* Chrome, Safari, Opera */
    animation: keyframeMoveDiv 5s;

    
/*    -webkit-animation-name: keyframeMoveDiv;
    animation-name: keyframeMoveDiv;*/

    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
    animation-iteration-count: infinite;

/*    -webkit-transition-duration: 5s;
    transition-duration: 5s;*/

    -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
    animation-timing-function: linear;

    -webkit-animation-direction: alternate;
    animation-direction: alternate;

    -webkit-animation-delay: 2s;
    animation-delay: 2s;

    -webkit-animation-play-state: running; /* Chrome, Safari, Opera */
    animation-play-state: running;
}

@keyframes keyframeMoveDiv {
    0%   {background:#FF0000; margin-left: 0;}
    25%  {background:#00FF00; margin-left: 200px;}
    50%  {background:#0000FF; margin-left: 500px;}
    75%  {background:#FFFF00; margin-left: 700px;}
    100% {background:#00FFFF; margin-left: 0;}
}

@-webkit-keyframes keyframeMoveDiv {
    0%   {background:#FF0000; margin-left: 0;}
    25%  {background:#00FF00; margin-left: 200px;}
    50%  {background:#0000FF; margin-left: 500px;}
    75%  {background:#FFFF00; marign-left: 700px;}
    100% {background:#00FFFF; margin-left: 0;}
}