CSS Keyframe Generator

Animation settings

Preset animation-name

Duration animation-duration

Timing function animation-timing-function

Iteration count animation-iteration-count

1 2 3

Direction

Fill mode

Live preview

Keyframe timeline Select a stop to freeze the preview at that moment.

The black line shows where the animation is in time. Each diamond is a keyframe stop from the @keyframes rule.

Animation class rule

Apply this to the element you want to move.

Longhand

Keyframe definition

The steps the animation moves through.

How it works

Keyframe stops

A @keyframes rule is a list of snapshots. Each percentage is a point in time: 0% is the start, 100% is the end, and 50% is halfway through the duration. The browser fills in every frame between the snapshots for you.

from is another name for 0%, and to is another name for 100%. Use them when an animation only needs a start and an end.

@keyframes grow { from { transform: scale(1); } /* 0% */ to { transform: scale(2); } /* 100% */ }

Stops that look the same can share one rule, like 0%, 100% { … }. The Bounce and Shake presets use this.

The animation properties

animation-name: Which @keyframes rule to play. It must match the name after @keyframes exactly.
animation-duration: How long one cycle takes, in seconds (s) or milliseconds (ms).
animation-timing-function: The speed curve between stops. linear is constant speed, ease-in starts slow, ease-out ends slow, and cubic-bezier() lets you draw your own curve, including overshoot.
animation-iteration-count: How many times the cycle repeats. infinite never stops.
animation-direction: normal plays 0% → 100%, reverse plays 100% → 0%, and alternate goes forward, then backward, on each repeat.
animation-fill-mode: What the element looks like before and after it plays. forwards keeps the last frame; none snaps back to the element’s normal style.

The animation shorthand combines them on one line, in this order: name, duration, timing function, iteration count, direction, fill mode. Turn on Longhand above the code to see each property separately.