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.

How to Create CSS Keyframe Animations (Step by Step)

🎬

Try CSS Animation Generator

Free, no signup →