CSS Animations

CSS Animations enable you to create smooth motion effects by changing CSS property values over time. Animations improve user experience and make websites more attractive and interactive.

Advantages of CSS Animations

• Create attractive visual effects.
• Improve user interaction.
• Do not require JavaScript.
• Run smoothly in modern browsers.
• Useful for buttons, cards, images, loaders, and menus.

Without Animation

Button → Static

With Animation

Button → Smoothly moves,
changes color or fades

The @keyframes rule defines the animation by specifying what styles an element should have at different stages of the animation.

@keyframes move{

    from{

        left:0;

    }

    to{

        left:200px;

    }

}

The animation-name property connects an element to a specific @keyframes animation.

@keyframes colorChange{

    from{

        background:red;

    }

    to{

        background:blue;

    }

}

.box{

    animation-name:colorChange;

}

The animation-duration property specifies how long an animation takes to complete one cycle.

.box{

    animation-name:move;

    animation-duration:2s;

}

The animation-delay property specifies how long the browser waits before starting an animation.

.box{

    animation-name:move;

    animation-duration:2s;

    animation-delay:1s;

}

The animation-iteration-count property specifies how many times an animation should repeat.

.box{

    animation-name:bounce;

    animation-duration:2s;

    animation-iteration-count:3;

}

The animation-direction property specifies whether an animation should play forward, backward, or alternate between directions.

.box{

    animation-name:move;

    animation-duration:2s;

    animation-direction:alternate;

}

The animation-timing-function property controls the speed curve of an animation.

.box{

    animation-name:move;

    animation-duration:3s;

    animation-timing-function:ease-in-out;

}

Example 1: Moving Box

@keyframes move{

    from{

        left:0;

    }

    to{

        left:200px;

    }

}

.box{

    position:relative;

    animation:move 2s;

}

Example 2: Rotating Element

@keyframes rotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.logo{

    animation:rotate 3s linear infinite;

}

Example 3: Fade In

@keyframes fade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.text{

    animation:fade 2s;

}

.box{

    animation:

    move 2s ease-in-out

    1s infinite alternate;

}

Following best practices helps create smooth, attractive, and user-friendly animations while maintaining website performance.

• Use animations only where they improve user experience.
• Keep animation duration reasonable (0.3s–2s).
• Prefer animating transform and opacity for better performance.
• Avoid too many animations on the same page.
• Use meaningful animation names.
• Test animations on different browsers and devices.
• Use infinite animations only when necessary.
• Use the shorthand animation property to keep code clean.

❌ Incorrect

.box{

    animation:move 10s infinite;

}

✔ Correct

.box{

    animation:move 1s ease;

}

CSS Animations are fully supported by all modern web browsers and are widely used in responsive web applications.

1. What are CSS Animations?
2. What is the purpose of @keyframes?
3. Which property specifies the animation name?
4. What does animation-duration do?
5. How do you delay an animation?
6. What is the purpose of animation-iteration-count?
7. What does animation-direction control?
8. Which property controls animation speed?
9. What is the shorthand property for CSS Animations?
10. What is the difference between CSS Transitions and CSS Animations?

In this lesson, you learned:

• ✔ Introduction to CSS Animations.
• ✔ @keyframes Rule.
• ✔ animation-name.
• ✔ animation-duration.
• ✔ animation-delay.
• ✔ animation-iteration-count.
• ✔ animation-direction.
• ✔ animation-timing-function.
• ✔ Practical Animation Examples.
• ✔ Best Practices and Common Mistakes.