🎨 CSS Animation Tutorial

What is CSS Animation?

CSS animations let you smoothly transition property values over time. It adds life to your page. It’s made up of:

@keyframes — defines the steps of the animation
animation — sets the timing, duration, and iteration

Example Animated Box

Moving Box

This box uses moveBox keyframes to move and swap colors over 3 seconds — forever.

💡 You can control the speed, direction, delay, and repeats of animations using the animation property.

@keyframes Example

@keyframes moveBox {
  0% {
    transform: translateX(0);
    background-color: #03a9f4;
  }
  50% {
    transform: translateX(200px);
    background-color: #e91e63;
  }
  100% {
    transform: translateX(0);
    background-color: #03a9f4;
  }
}

📝 Animation Quiz

1. What does @keyframes define?

The animation duration The steps of an animation The background color

2. What does animation: moveBox 3s ease-in-out infinite; do?

Changes box color Defines timing, duration, and infinite loop Adds a border to the box

3. What does infinite mean in animations?

Runs animation once Loops animation forever Slows the animation down