JSFiddle - React, Tailwind, and code Playground

by Venkatesan S

HTML

<div>Animate Me</div>

CSS

div {
    margin: 20px;
    width: 200px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 22px;
    color: white;
    background-color: #666666;
    position: relative;
    
    -webkit-animation-name: animate; 
    -webkit-animation-duration: 10s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-name: animate;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@-webkit-keyframes animate {
     0%   {left:0px; top:0px;width: 200px;height: 60px;}
    10%   {left:75px; top:75px;width: 200px;height: 60px;}
    20%   {left:150px; top:150px;width: 220px;height: 70px;line-height:70px;font-size:24px;}
    30%   {left:200px; top:200px;width: 230px;height: 80px;line-height:80px;font-size:26px;}
    40%   {left:250px; top:100px;width: 200px;height: 60px;line-height:60px;}
    50%   {left:300px; top:0px;width: 200px;height: 60px;}
    60%   {left:225px; top:75px;width: 200px;height: 60px;}
    70%   {left:150px; top:150px;width: 220px;height: 70px;line-height:70px;font-size:24px;;}
    80%   {left:100px; top:200px;width: 230px;height: 80px;line-height:80px;font-size:26px;}
    90%   {left:50px; top:100px;width: 200px;height: 60px;line-height:60px;}
    100%   {left:0px; top:0px;width: 200px;height: 60px;}
}

@keyframes animate {
    0%   {left:0px; top:0px;width: 200px;height: 60px;}
    10%   {left:75px; top:75px;width: 200px;height: 60px;}
    20%   {left:150px; top:150px;width: 220px;height: 70px;line-height:70px;font-size:24px;}
    30%   {left:200px; top:200px;width: 230px;height: 80px;line-height:80px;font-size:26px;}
    40%   {left:250px; top:100px;width: 200px;height: 60px;line-height:60px;}
    50%   {left:300px; top:0px;width: 200px;height: 60px;}
    60%   {left:225px; top:75px;width: 200px;height: 60px;}
    70%   {left:150px; top:150px;width: 220px;height: 70px;line-height:70px;font-size:24px;;}
    80%  ...