CSSApril 2026 · 7 min read

How to Create CSS Keyframe Animations (Step by Step)

CSS @keyframes animations let you define multi-step sequences that go far beyond simple transitions. While transitions animate between two states, keyframe animations can define any number of intermediate steps — entrance effects, loading sequences, attention-grabbers, and complex choreographed motion.

🎬

Try the CSS Animation Generator

Free, no signup

→

Derek Giordano

Designer & Developer

In this guide

01@keyframes Basics02Multi-Step Animations03Animation Properties Deep Dive04Using the CSS Animation Generator

⚡ Key Takeaways

Build CSS @keyframes animations from scratch.
Covers @keyframes basics.
Covers multi-step animations.
Covers animation properties deep dive.
Covers using the css animation generator.

@keyframes Basics

Define an animation with @keyframes and apply it with the animation property:

@keyframes fadeIn {

from { opacity: 0; transform: translateY(20px); }

to { opacity: 1; transform: translateY(0); }

}

.element {

animation: fadeIn 0.5s ease-out forwards;

}

'from' equals 0%, 'to' equals 100%. The animation shorthand combines name, duration, easing, delay, iteration-count, direction, fill-mode, and play-state.

Multi-Step Animations

Use percentage keyframes for intermediate steps:

💡 Tip

Stick to animating transform and opacity for smooth 60fps performance. These properties are handled by the GPU compositor and skip expensive layout recalculations.

@keyframes bounce {

0% { transform: translateY(0); }

40% { transform: translateY(-30px); }

60% { transform: translateY(-15px); }

80% { transform: translateY(-5px); }

100% { transform: translateY(0); }

}

Each percentage defines a state at that point in the timeline. The browser interpolates between them using the specified easing function.

Animation Properties Deep Dive

animation-fill-mode: forwards keeps the element at the final keyframe state after the animation ends. Without it, elements snap back to their pre-animation state. animation-delay staggers multiple elements: apply increasing delays to child elements for a cascading entrance effect. animation-iteration-count: infinite loops forever — use for loading indicators and ambient effects. animation-direction: alternate reverses on even iterations — creates a ping-pong effect.

⚠ Warning

Avoid animating width, height, top, or left. These trigger layout recalculations on every frame and can drop performance below 60fps.

Using the CSS Animation Generator

The CSS Animation Generator provides preset animations (fade, slide, bounce, rotate, scale, shake) that you can customize with duration, easing, delay, and iteration settings. Preview the animation in real time, adjust parameters until it feels right, then copy the complete CSS including the @keyframes block. Much faster than writing keyframes by hand.

Frequently Asked Questions

How do I create a CSS animation?+

Define the sequence with @keyframes (naming states at percentage points), then apply it with the animation shorthand property specifying name, duration, easing, and other options.

What is animation-fill-mode: forwards?+

It tells the browser to keep the element at the final keyframe state after the animation ends. Without it, the element reverts to its pre-animation appearance.

How do I loop a CSS animation?+

Set animation-iteration-count: infinite. The animation repeats indefinitely. Combine with animation-direction: alternate for a smooth back-and-forth effect.

Try it yourself

Use the CSS Animation Generator — free, no signup required.

⚡ Open CSS Animation Generator

Derek Giordano

Written by the creator of Ultimate Design Tools. BA in Business Marketing.

📚 References & Further Reading

⚡ Try the free CSS Transition Playground →