CSS Animations

CSS animations allow elements to change from one style to another over time without requiring JavaScript.

---

What is CSS Animation?

CSS animation allows you to define a sequence of visual changes and control how an element moves, changes color, rotates, scales, or fades over time.

Animations are commonly used for loading effects, attention indicators, banners, cards, buttons, illustrations, and interactive user interfaces.

Interactive Animation Example

Hover over the artwork below. The image itself uses CSS animation and transform effects to create a moving visual.

What You Will Learn

1. @keyframes

The @keyframes rule defines the different stages of an animation.

@keyframes moveBox {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(200px);
    }
}

2. Basic Animation

.moving-box {
    animation: moveBox 2s infinite alternate;
}

@keyframes moveBox {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(180px);
    }
}

Output

3. animation-name

The animation-name property specifies the name of the keyframe animation that should be applied.

.box {
    animation-name: colorChange;
}

@keyframes colorChange {

    from {
        background-color: #2563eb;
    }

    to {
        background-color: #7c3aed;
    }
}

4. animation-duration

The animation-duration property controls how long one complete animation cycle takes.

.box {
    animation-duration: 2s;
}

5. animation-timing-function

This property controls the speed pattern of the animation.

6. animation-iteration-count

This property specifies how many times the animation should repeat.

.box {
    animation-iteration-count: 3;
}

To repeat an animation continuously, use:

.box {
    animation-iteration-count: infinite;
}

7. animation-direction

The animation-direction property controls whether the animation runs forward, backward, or alternates.

.box {
    animation-direction: alternate;
}

8. animation-delay

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

.box {
    animation-delay: 1s;
}

9. animation-fill-mode

The animation-fill-mode property controls the styles applied before or after the animation runs.

.box {
    animation-fill-mode: forwards;
}

10. Multiple Keyframe Steps

An animation can have more than two stages.

@keyframes colorfulMove {

    0% {
        transform: translateX(0) scale(1);
        background-color: #2563eb;
    }

    50% {
        transform: translateX(120px) scale(1.2);
        background-color: #7c3aed;
    }

    100% {
        transform: translateX(0) scale(1);
        background-color: #0f766e;
    }
}

Output

Image Animation with CSS

CSS animations can also be applied to images to create visual movement and attention effects.

.animated-image {
    animation: imageFloat 3s ease-in-out infinite;
}

@keyframes imageFloat {

    0% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-12px) scale(1.04);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

Output

Practical Example: Loading Animation

A common real-world use of CSS animations is a loading indicator.

.loader {
    animation: spin 1s linear infinite;
}

@keyframes spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

Output

Animation Shorthand

You can define multiple animation properties using the shorthand animation property.

.box {
    animation:
        moveBox
        2s
        ease
        1s
        infinite
        alternate;
}

CSS Transitions vs CSS Animations

Best Practices

• Keep animations smooth and purposeful.
• Avoid excessive animations that distract users.
• Keep durations appropriate for the type of effect.
• Use transforms and opacity for many performant visual effects.
• Test animations on mobile and desktop screens.
• Consider users who prefer reduced motion.