JSFiddle - React, Tailwind, and code Playground

by ajayogal

HTML

<ul class='navigation'>
    <li>about us</li></span>
    <li>contact us</li>
    <li>home</li>
    <li>sitemap</li>
</ul>

<div id='moving'></div>

<div id='circle'></div>

CSS

ul.navigation{list-style:none;}
ul.navigation li{padding: 8px 10px; background: #339900; display:block; width:100px; margin: 2px 0;transition:width 1s; cursor:pointer;
-webkit-transition:width 1s; /* Safari */

}



ul.navigation li:hover{width:120px; color: #fff;position:relative;animation-name:mymove1;
animation-duration:0.5s;
-moz-animation-name:mymove1;
    -moz-animation-duration:0.5s;
/* Safari and Chrome */
-webkit-animation-name:mymove1;
    -webkit-animation-duration:0.5s;

    }
span.tri
{ width: 0; height: 0; border-top: 5px solid transparent; border-left: 10px solid red; border-bottom: 5px solid transparent; float:left}

@keyframes mymove1
{
from {left:0px;}
to {left:10px;}
}

@-webkit-keyframes mymove1 /* Safari and Chrome */
{
from {left:0px;}
to {left:10px;}
}
@-moz-keyframes mymove1 /* firefox */
{
from {left:0px;}
to {left:10px;}
}


div#moving{
width:200px;    
height:200px;
    background: #ff0000;position:relative;
animation-name:mymove;
animation-duration:5s;
-moz-animation-name:mymove;
    -moz-animation-duration:5s;
/* Safari and Chrome */
-webkit-animation-name:mymove;
    -webkit-animation-duration:5s;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
@-moz-keyframes mymove /* firefox */
{
from {left:0px;}
to {left:200px;}
}

#circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }
#circle:hover{background: red; -moz-border-radius: 50px/100px; -webkit-border-radius: 50px/100px; border-radius: 50px/100px; width: 100px; height: 200px; }