CSS animation generator: how to create a @keyframes animation
A CSS animation generator writes the @keyframes block and the animation properties for you, and lets you watch the result before you copy it. Here you set an Animation Name, Duration, Delay, Timing Function, Iteration Count, Direction and Fill Mode, write or load the keyframes, click Play to preview the motion on a box, and click Copy to take the CSS.
The output uses the long-form properties, such as animation-name and animation-duration, in a rule for .animated-element, followed by a commented one-line shorthand equivalent. By default it also adds a prefers-reduced-motion rule that turns the animation off for visitors who ask for less motion. Untick Turn the animation off for visitors who prefer reduced motion to leave it out.
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). Keyframes are checked with your browser's own CSS parser as you type, so a missing brace, an invalid keyframe selector or a keyframe with no valid declarations is flagged before you copy. Style the element you animate with the border radius generator, the box shadow generator and the gradient generator.
Table of Use: presets and what they write
| Effect | Keyframes | Timing and repeat |
|---|---|---|
| Fade In | opacity from 0 to 1 | 1s, ease-in, plays once, fill mode forwards |
| Slide In | translateX from -100% to 0, with opacity from 0 to 1 | 0.8s, ease-out, plays once, fill mode forwards |
| Bounce | translateY from 0 to -30px at 50%, back to 0 | 1s, back-out cubic-bezier, infinite |
| Rotate | rotate from 0deg to 360deg | 2s, linear, infinite |
| Pulse | scale from 1 to 1.1 | 1.5s, ease-in-out, infinite, direction alternate |
| Shake | translateX 0, then -10px at 25%, 10px at 75%, 0 | 0.5s, ease-in-out, plays once |
| Fade In, then Slide In | Add each as a step in Multiple Elements & Sequences | One rule with animation-delay: 0s, 1s, so the second starts as the first ends |
| A list of 3 items appearing one by one | Elements 3, Stagger 0.15s | Extra rules: :nth-child(2) delayed 0.15s and :nth-child(3) delayed 0.3s |
Pair a looping effect like Pulse with a colour from the color picker, and lay the animated items out with the flexbox generator or the CSS grid generator.
Features
- Seven animation properties. Animation Name (checked, reserved words such as none are rejected), Duration from 0.01 to 120 seconds, Delay from -60 to 60 seconds (a negative delay starts part-way through), Iteration Count as a number or infinite, four Directions and four Fill Modes.
- Timing Function menu. linear, ease, ease-in, ease-out, ease-in-out, two back curves, steps(5) and a custom cubic-bezier editor with draggable handles, typed x1, y1, x2 and y2, and six preset curves. x stays within 0 and 1; y accepts -5 to 5.
- Keyframes editor. Write the inside of @keyframes yourself. Percentages, from and to are all valid, and errors are explained in plain words.
- Six presets. Fade In, Slide In, Bounce, Rotate, Pulse and Shake.
- Multiple elements. Elements from 1 to 8 with a Stagger slider from 0 to 1 second in 0.05 steps, written as :nth-child rules.
- Sequences. Add steps, move them up or down, remove them or Clear sequence. The tool chains the delays for you, gives clashing keyframe names a numeric suffix and refuses a sequence where an infinite step is not last.
- Preview and Timeline. Play, then Replay, runs your animation on a box, or on numbered boxes when Elements is above 1. The Timeline shows delay, one cycle and the total time.
- Reduced motion. A prefers-reduced-motion rule is included by default.
The tool makes time-based @keyframes animations. It does not write transitions or scroll-driven animations. Tidy the stylesheet you paste it into with the CSS beautifier or shrink it with the CSS minifier.
How to use the CSS animation generator
- Under Preset Animations, click the effect closest to what you want, or keep the default and edit the Keyframes box.
- Under Animation Properties, set Duration, Delay, Timing Function, Iteration Count (or click Infinite), Direction and Fill Mode.
- For your own easing, pick Custom cubic-bezier (curve editor) in Timing Function and drag the handles.
- Click Play. Change anything and click Replay to see it again, and read the Timeline for the total time.
- Optional: raise Elements and set Stagger, or click Add current animation as a step for each part of a sequence and tick Preview and export the sequence.
- Click Copy under CSS Code, paste it into your stylesheet and add the class
animated-element.
Who can use it
- Front-end developers who want working keyframes for loaders, attention effects and entrances without hand-typing every property.
- Designers checking how a curve or a delay feels before handing motion specs to a developer.
- Students learning what each animation property does by changing one at a time and pressing Replay.
- Site owners who add motion through a custom CSS box. Convert the result to nested rules with the CSS to SCSS converter if you work in SCSS.
- Accessibility reviewers confirming that the reduced-motion rule is present in the copied code.
FAQs
What is the difference between CSS animations and CSS transitions?
A transition animates a property from one value to another when something changes, such as a hover or a class being added. A @keyframes animation can pass through any number of intermediate states, start on its own when the element appears, repeat or loop forever, and run backwards or alternate. Use transitions for simple state changes and animations for loaders, attention effects and multi-step motion.
How do I use the CSS the animation generator creates?
Copy the CSS into your stylesheet and add the class animated-element to the element you want to animate, or rename the selector. The code holds the @keyframes block, the animation properties and, if you leave the option ticked, a prefers-reduced-motion rule that switches the animation off. With several elements, the :nth-child rules stagger siblings inside the same parent.
How do I make a custom easing curve with cubic-bezier?
Choose Custom cubic-bezier (curve editor) in the Timing Function menu. Drag the two handles or type x1, y1, x2 and y2. The x values must stay between 0 and 1. A y value outside 0 to 1 makes the motion overshoot and settle back, which is how back and bounce-like effects are made. The six preset buttons give you ease and back curves as starting points.
How do I chain several animations or stagger them across elements?
To chain, set up an animation, click Add current animation as a step, change the settings or pick another preset and add the next step. Each step starts when the previous one finishes, and only the last step may repeat forever. To stagger, raise Elements above 1 and set Stagger, which adds :nth-child rules that delay each sibling a little more.
What do animation-fill-mode and animation-direction do?
Fill mode decides what the element looks like outside the active animation. forwards keeps the last keyframe after the end, backwards applies the first keyframe during the delay, both does both, and none applies neither. Direction decides the playing order: normal, reverse, alternate (every second cycle plays backwards) or alternate-reverse. Alternate needs an iteration count above 1 to show.
How can I make CSS animations run smoothly on mobile devices?
Animate transform and opacity rather than width, height, top, left or margin, because browsers can usually run those two without recalculating layout. Keep the number of elements animating at the same time small, use will-change only on elements that are about to animate, and test on a real mid-range phone rather than only on a fast desktop.
How do I make animations accessible for people who are sensitive to motion?
Respect the prefers-reduced-motion media query. This generator adds a rule that turns the animation off for those visitors unless you untick the option. Also avoid large, fast or endlessly looping motion, give people a way to pause anything that moves for more than five seconds, and never rely on motion alone to convey information.
Is my animation code sent anywhere?
No. It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). The preview, the keyframe check, which uses your browser’s own CSS parser, and the generated code all stay on your device. The tool saves nothing between visits, so copy the CSS before you close the page.