What is CSS animation?


Animation changes elements from one style to another.

You can change any number of CSS properties as needed.

To use CSS animation, you must first specify some key frames for the animation.

Key frames save the styles that the element has at a particular time.

When you specify a CSS style in the @keyframes rule, the animation changes from the current style to a new style at a specific time.

To make the animation work, you must bind the animation to the element.

The following example binds the “example” animation to the

element. The animation will last 4 seconds and will gradually change the background color of the
element from “red” to “yellow” :

Note: the animation-duration attribute defines the time required to complete the animation. If animate-duration does not specify this attribute, the animation will not occur because the default value is 0 (0 seconds).

In the example above, we have specified when the style will be changed by using the keyword “from” and “to” (which represents 0% (start) and 100% (completion)).

You can also use percentages. By using percentages, you can add as many style changes as you want.

The following example changes the background color of the

element when the animation finishes 25%, finishes 50% and the animation finishes 100%.

Delay animation

The animation-delay attribute specifies the delay in the animation start.

The following example has a 2-second delay before starting the animation:

Negative values are also allowed. If you use a negative value, the animation will start playing, as if it has been playing for N seconds.

In the following example, the animation starts as if it has been playing for two seconds:


Please enter your comment!
Please enter your name here