CSS Animation
Definition and Usage
Some CSS properties can be animated, which means they can be used for animations and transitions.
Animation properties can be gradually changed from one value to another, such as size, number, and percentage of color.
Browser Support
Figures in the table represent the first browser to support the method version number.
Immediately after the number -webkit-, -moz-, or -o- specifies the first browser that supports this attribute version prefix.
4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 4.0 -webkit- | 15.0 -webkit- 12.1 12.0 -o- |
Examples
The background color gradually changes from red to blue:
@keyframes mymove
{
from {background-color:red;}
to {left:blue;}
}
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}
{
from {background-color:red;}
to {left:blue;}
}
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}
Animation properties
CSS animation properties: