CSS Animations

Written by Swapnil RajaUpdated 30 Jul 2026

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;
    }
}

PreviousEntry & Exit Transitions NextScroll Animations

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;

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; }
}

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>

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

CSS Animations

Syntax

Attributes

Compose animations that affect the same property

Example

Output

Browser Output

Browser Support

Notes

Using Percentage Keyframes

Infinite Animation

Alternate Direction

Delay Animation

Shorthand Syntax

Common Animation Properties

Conclusion

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