CSS Animations & Transitions

CSS Animations

CSS Animations allow elements to change styles automatically over time without requiring JavaScript.

Unlike transitions, which require a state change such as hover, animations can run automatically and continuously. The supporting concepts are explained in Scroll Animations and View Transitions.

CSS Animations are commonly used for:

Loading indicators
Bouncing buttons
Image sliders
Attention-grabbing effects
Interactive UI elements

Animations are created using:

@keyframes
Animation properties

Syntax

Step 1: Create Keyframes

Create Keyframes

css

@keyframes animation-name {
    from {
        property: value;
    }
    to {
        property: value;
    }
}

Step 2: Apply Animation

Apply Animation

css

selector {
    animation: animation-name duration;
}

Animation Example

css

@keyframes moveBox {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(200px);
    }
}
.box {
    animation: moveBox 2s;
}

Moves the element 200px to the right over 2 seconds.

Attributes

Property	Description	Example
animation-name	Specifies keyframe name	animation-name: slide;
animation-duration	Sets animation length	animation-duration: 2s;
animation-delay	Delays animation start	animation-delay: 1s;
animation-iteration-count	Sets repeat count	animation-iteration-count: infinite;
animation-direction	Controls animation direction	animation-direction: alternate;

Compose animations that affect the same property

When multiple animations target the same property, animation-composition controls whether a later effect replaces, adds to, or accumulates with the underlying value. Additive composition is especially useful when separate animations contribute independent transforms, but the final result should be tested because composition follows each property's animation type.

Focused example

css

.badge {
  animation:
    drift 2s infinite alternate,
    pulse 900ms infinite alternate;
  animation-composition: add, replace;
}

@keyframes drift {
  to { transform: translateX(2rem); }
}

@keyframes pulse {
  to { opacity: 0.55; }
}

Example

CSS Animations Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Animation Example</title>
    <style>
        @keyframes bounce {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-50px);
            }
            100% {
                transform: translateY(0);
            }
        }
        .ball {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            border-radius: 50%;
            animation: bounce 2s infinite;
        }
    </style>
</head>
<body>
    <div class="ball"></div>
</body>
</html>

Output

Browser Output

css

A blue circular element will appear
The circle will continuously move up and down
The animation will repeat forever
The movement will appear smooth and automatic

Browser Support

Feature	Chrome	Edge	Firefox	Safari
animation	43	12	16	9
animation-composition	112	112	115	16

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

Notes

Using Percentage Keyframes

css

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Creates a fade-in effect.

Infinite Animation

css

animation-iteration-count: infinite;

Repeats forever.

Alternate Direction

css

animation-direction: alternate;

Plays forward and then backward.

Delay Animation

css

animation-delay: 2s;

Starts after 2 seconds.

Shorthand Syntax

css

animation:
    bounce
    2s
    ease
    infinite;

Common Animation Properties

Property	Purpose
animation-name	Select keyframes
animation-duration	Set speed
animation-delay	Delay start
animation-iteration-count	Repeat animation
animation-direction	Control direction

Conclusion

CSS Animations provide powerful tools for creating engaging and interactive web experiences. By combining @keyframes with animation properties, you can create smooth movements, visual effects, and dynamic interfaces without using JavaScript.

PreviousEntry & Exit Transitions NextScroll Animations