css 3 animations

by alanbeech

HTML

<div></div>

CSS

div
{
    position: absolute;
width:100px;
height:100px;
background:red;
animation:myfirst 5s linear 2s infinite alternate;
-webkit-animation:myfirst 5s linear 2s infinite alternate /* Safari and Chrome */
    
    
}


@keyframes myfirst
{
    0%   
    {
        background:red; left:0px; top:0px;
        

    }
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {
    background:red; left:0px; top:0px;
    transform:rotate(360deg);
        -ms-transform:rotate(360deg); /* IE 9 */
        -webkit-transform:rotate(360deg); /* Safari and Chrome */
    }
}

@-webkit-keyframes myfirst /* Safari and Chrome */
 {
  0%   
    {
        background:red; left:0px; top:0px;
        

    }
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {
    background:red; left:0px; top:0px;
    transform:rotate(360deg);
        -ms-transform:rotate(360deg); /* IE 9 */
        -webkit-transform:rotate(360deg); /* Safari and Chrome */
    }
 }