CSS animation
Definitions and usages
Some CSS properties can be animated, which means they can be used for animation and transition.
Animation properties can gradually change from one value to another, such as size, quantity, percentage, and color.
Browser support
The numbers in the table support the version number of the first browser for this method.
Immediately after the number - webkit-, -moz-, or -o- specifies the first browser version prefix that supports the property.
Animated properties
Instance
The background color gradually changes from red to blue:
@keyframes mymove
{
from {background-color:red;}
to {left:blue;}
}
/ * Safari and Chrome: * /
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}
{
from {background-color:red;}
to {left:blue;}
}
/ * Safari and Chrome: * /
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}
Try it out . . .
Animation properties in CSS: