CSS3 @keyframes Rule
The animation is created in the @keyframe rule. It is used to control the intermediate steps in a CSS animation sequence.
What animation does
An animation makes an element change gradually from one style to another. You can add as many as properties you want to add. You can also specify the changes in percentage.0% specify the start of the animation and 100% specify its completion.
How CSS animation works
When the animation is created in the @keyframe rule, it must be bound with selector; otherwise the animation will have no effect.
The animation could be bound to the selector by specifying at least these two properties:
CSS animation properties
CSS animation example: changing background color
Let's see a simple CSS animation example that changes background color of rectangle from RED to BLACK.Test it Now
CSS animation example: Moving Rectangle
Let's take another example to display animation with percentage value.Test it Now