Sunday 16 December 2012

Animation in CSS3

Binding an animation to a <-div-> element, using the shorthand property:

div

{

width:100px;
height:100px;
background:red;
position:relative;
animation-name:mymove ;
animation-duration:10s;
/* Firefox */
-moz-animation-name:mymove ;
-moz-animation-duration:10s;
/* Safari and Chrome */
-webkit-animation-name:mymove ;
-webkit-animation-duration:10s;

}

@keyframes mymove
{

from {left:0%;}
to {left:100%;}

}

@-moz-keyframes mymove /*Firefox*/
{
from {left:0px;}
to {left:100px;}
}

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

@-o-keyframes mymove /*Opera*/
{
from {left:0px;}
to {left:100px;}
}

No comments:

Post a Comment