Binding an animation to a <-div-> element, using the shorthand property:-div->
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;}
}
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