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.

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;

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

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	No

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.

PreviousCSS Transitions NextCSS Media Queries