JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

HTML

<div>
</div>

CSS

div {
    width: 100px;
    height: 100px;
    background: red;
    position :relative;
    -webkit-animation: mymove 5s infinite;       animation: mymove 20s infinite;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    0%   {top: 0px;}
    25%  {top: 200px;}
    75%  {top: 50px}
    100% {top: 100px;}
}

/* Standard syntax */
@keyframes mymove {
    0%     {top: 0px;   width:50px;}
    10%    {top: 50px;  width:100px;}
    20%    {top: 100px; width:50px;}
    30%    {top: 50px;  width:100px;}
    40%    {top: 150px; width:50px;}
    50%    {top: 100px; width:100px;}
    60%    {top: 200px; width:50px;}
    70%    {top: 150px; width:100px;}
    80%    {top: 250px; width:50px;}
    90%    {top: 200px; width:100px;}
    100%   {top: 300px; width:0px;}
}