CSS Animation Generator
Pick a preset such as bounce, fade, slide, or spin, then tune the duration, delay, iteration count, direction, fill-mode, and easing (cubic-bezier). The preview and the @keyframes plus animation CSS update together. You can also include a prefers-reduced-motion block for visitors who want less motion. For depth effects, see the CSS Box-Shadow Generator.
🔒 Runs in your browser · Your data is never sent to a server
Animation settings
Easing (animation-timing-function)
Preview
The preview restarts whenever you change a setting. It plays even if your OS is set to reduce motion.
Notes
- This tool generates an animation that uses @keyframes. For hover-style state changes with transition, you can reuse the same duration and easing values.
- In cubic-bezier, x1 and x2 are limited to 0–1 by the CSS spec. Values of y1 and y2 outside 0–1 produce overshoot, where the motion goes past its target and settles back.
- Easing applies to each interval between keyframes, not to the whole animation. A preset with several keyframes therefore speeds up and slows down within every segment.
- Animating transform and opacity is usually smooth because browsers can handle it on the GPU. Animating width, height, or top/left forces layout recalculation and may feel heavy.
- Animation names can only contain letters, digits, hyphens, and underscores. Names that start with a digit or collide with keywords such as none are corrected automatically.
- For visitors with vestibular disorders or motion sensitivity, including the prefers-reduced-motion block is recommended.
Glossary
@keyframes
A CSS rule that defines the intermediate steps of an animation (which styles apply at which percentage). It is named and referenced through animation-name.
animation-timing-function (easing)
The function that controls how progress advances over time. It is either a keyword such as ease or linear, or a curve written with cubic-bezier().
cubic-bezier
A function that describes an acceleration curve with two control points (x1, y1) and (x2, y2). cubic-bezier(0.25, 0.1, 0.25, 1) is equivalent to ease.
animation-fill-mode
Controls whether styles apply before the animation starts and after it ends. forwards keeps the end state; backwards applies the start state during the delay.
prefers-reduced-motion
A media query that detects the OS setting for reduced motion. It lets you turn animations off only for people who asked for less movement.
FAQ
When should I use animation instead of transition?
A transition interpolates between two values when a state changes, such as on hover, so it only handles a start and an end. An animation uses @keyframes with any number of steps and can loop, alternate, and play automatically. Use animation for load-in effects and loops.
What is the difference between fill-mode forwards and backwards?
forwards keeps the last keyframe applied after the animation ends. backwards applies the first keyframe during the delay. Use both when you need each behavior.
What happens if I set cubic-bezier y values outside 0–1?
Values of y1 or y2 outside 0–1 make the motion overshoot its target and then settle back. x1 and x2 must stay within 0–1 per the CSS specification.
Should I add prefers-reduced-motion?
It is recommended for visitors who are sensitive to motion. With this option, the output includes an @media (prefers-reduced-motion: reduce) block that sets animation: none, which matters most for loops and large movements.
Share this page