CSS Animation Tutorial

Understanding CSS Animation

CSS animations allow you to change property values smoothly over a specified duration. Animations can make your webpage more interactive and engaging. The main components of a CSS animation are:

• @keyframes: Defines the steps in the animation.
• animation: Specifies the animation properties like duration, timing function, and iteration count.

Animation Example

In the example above, the `.box` is animated using the `moveBox` keyframe animation. The box will move horizontally and change color over 3 seconds and repeat infinitely.

Understanding the Keyframes

The `@keyframes moveBox` defines the animation steps:

• 0%: The starting position, where the box is at the left (0% translateX) and has a blue color.
• 50%: Midway through the animation, the box moves 200px to the right and changes color to red.
• 100%: The box returns to its original position (0% translateX) and turns back to blue.