JSFiddle - React, Tailwind, and code Playground

by kougiland

CSS

#animated_div
{
width:60px;
height:40px;
background:#92B901;
color:#ffffff;
position:relative;
font-weight:bold;
font-size:20px;
padding:10px;
animation:animated_div 5s 1;
-moz-animation:animated_div 5s 1;
-webkit-animation:animated_div 5s 1;
border-radius:5px;
-webkit-border-radius:5px;

}

@keyframes animated_div
{
0%        {transform: rotate(0deg);left:0px;}
25%        {transform: rotate(20deg);left:0px;}
50%        {transform: rotate(0deg);left:500px;}
55%        {transform: rotate(0deg);left:500px;}
70%        {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100%    {transform: rotate(-360deg);left:0px;}
}

@-webkit-keyframes animated_div
{
0%        {-webkit-transform: rotate(0deg);left:0px;}
25%        {-webkit-transform: rotate(20deg);left:0px;}
50%        {-webkit-transform: rotate(0deg);left:500px;}
55%        {-webkit-transform: rotate(0deg);left:500px;}
70%        {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100%    {-webkit-transform: rotate(-360deg);left:0px;}
}

@-moz-keyframes animated_div
{
0%   {-moz-transform: rotate(0deg);left:0px;}
25%  {-moz-transform: rotate(20deg);left:0px;}
50%  {-moz-transform: rotate(0deg);left:500px;}
55%  {-moz-transform: rotate(0deg);left:500px;}
70%  {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-moz-transform: rotate(-360deg);left:0px;}
}