Why does a property change at a keyframe where I didn’t set it?

In CSS, a property missing from a keyframe is interpolated from the nearest keyframes that do set it — that’s the standard behavior. Also, once an animation uses transforms, every keyframe with a transform gets the same function list (for example translateY and scale), with defaults filled in, so the browser can interpolate each function smoothly.

What’s the difference between jump-start and jump-end in steps()?

steps(n) splits the animation into n jumps. jump-end, the default, jumps at the end of each interval so the first frame shows the start state; jump-start jumps at the beginning; jump-none holds both ends and makes n−1 jumps; jump-both jumps at both ends. Typewriter effects usually use steps(characters, end) with a clip.

What is prefers-reduced-motion for?

People with vestibular disorders or motion sensitivity can turn on “reduce motion” in their system settings. The generated CSS includes @media (prefers-reduced-motion: reduce) to switch the animation off, and the Tailwind snippets add motion-reduce:animate-none. If the animation conveys meaning, consider a gentle fade for those users instead.

How do I use the animation in Tailwind?

In Tailwind v3, put the keyframes and animation into theme.extend in tailwind.config.js and use the animate-name class. In v4, define --animate-name and the @keyframes inside @theme in your CSS. For a one-off you can use the arbitrary class animate-[...], but the keyframes themselves still need to be defined in CSS.

💫

💫CSS Animation Generator - Keyframes, Easing & Tailwind

The fiddly part of CSS animation is tweaking keyframe percentages, transform combinations and easing, then reloading to see the result. This tool makes all of it visual. Start from a preset — fade in, fade in up, slide in, zoom in, bounce, pulse, shake, 3D flip, rotate, heartbeat, typewriter, wobble, rubber band, float, color cycle, blur in, blink or swing — then click the timeline to add keyframes and drag them into place. Each keyframe can set translate, rotate, 3D flip, skew, scale, opacity, background color, text color, blur, brightness and a right-side clip for typewriter effects; properties a keyframe leaves out are interpolated by the browser from its neighbors, and transforms are padded to the same function list across keyframes so they interpolate function by function rather than as matrices. Easing can be a keyword, a classic curve such as easeOutBack, a cubic-bezier you shape by dragging two handles, or steps(), and each keyframe segment can have its own easing. Duration, delay, iteration count (including infinite), direction and fill mode are all adjustable. Preview on a box, text or icon, pause, restart or scrub to any moment with a playhead on the timeline. The generated CSS merges identical keyframes and includes a prefers-reduced-motion query, and you also get a Tailwind v3 config, the v4 @theme form and an arbitrary-value class.

Free · No sign-up · Runs in your browserLast updated: 2026-10-26

Loading tool...

How to use CSS Animation Generator

1Click a preset as a starting point, or click an empty spot on the timeline to add keyframes
2Select a keyframe, tick the properties to animate and drag the sliders, then set easing, duration, iterations and direction
3Play or scrub the preview, then copy the CSS, Tailwind config or arbitrary class

FAQ

Why does a property change at a keyframe where I didn’t set it?: In CSS, a property missing from a keyframe is interpolated from the nearest keyframes that do set it — that’s the standard behavior. Also, once an animation uses transforms, every keyframe with a transform gets the same function list (for example translateY and scale), with defaults filled in, so the browser can interpolate each function smoothly.
What’s the difference between jump-start and jump-end in steps()?: steps(n) splits the animation into n jumps. jump-end, the default, jumps at the end of each interval so the first frame shows the start state; jump-start jumps at the beginning; jump-none holds both ends and makes n−1 jumps; jump-both jumps at both ends. Typewriter effects usually use steps(characters, end) with a clip.
What is prefers-reduced-motion for?: People with vestibular disorders or motion sensitivity can turn on “reduce motion” in their system settings. The generated CSS includes @media (prefers-reduced-motion: reduce) to switch the animation off, and the Tailwind snippets add motion-reduce:animate-none. If the animation conveys meaning, consider a gentle fade for those users instead.
How do I use the animation in Tailwind?: In Tailwind v3, put the keyframes and animation into theme.extend in tailwind.config.js and use the animate-name class. In v4, define --animate-name and the @keyframes inside @theme in your CSS. For a one-off you can use the arbitrary class animate-[...], but the keyframes themselves still need to be defined in CSS.