CSS Animation
Definition and Usage
Some CSS properties arecan have animation effects, which means they can be used for animations and transitions.
Animation properties can gradually change from one value to another, such as size, quantity, percentages, and colors.
Browser Support
The numbers in the table indicate the version number of the first browser that supports the method.
The -webkit-, -moz-, or -o- that follows the number specifies the browser version prefix that first supported the property.
| 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- |
4.0 -webkit- | 15.0 -webkit- 12.1 12.0 -o- |
Example
The background color gradually changes from red to blue:
@keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}
/*Safari and Chrome:*/
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}
Try it Yourself »
Animation Properties
Animation properties in CSS: