How to Apply Animation in CSS – Question & Answer

How do you apply animation in CSS? Explain with an example.

Answer:

Animation in CSS is applied using the @keyframes rule along with the animation property.
The @keyframes rule defines how an element changes its style at different stages of the animation, and the animation property applies it to the HTML element.

Steps to Apply Animation in CSS:

1. Define the animation using @keyframes

2. Apply the animation to an element using animation property

3. Set duration, timing, and repetition

Example:

Explanation:

• moveBox is the animation name

• 2s is the duration

• ease-in-out controls the speed

• infinite makes the animation repeat continuously

This is how animation is applied in CSS.

Categories: web designing web development html css front end developer