My Tool Studio
CSS

CSS Animation Generator

This CSS animation generator writes a @keyframes rule and the matching animation from 50 presets in six groups: entrance, exit, attention, text, loop and background. Name the animation and set duration and delay in ms or seconds, a timing function (CSS keywords, 24 Penner easings, a custom cubic-bezier curve you drag, or steps()), iteration count, direction and fill mode. Edit steps turns any preset into editable keyframes with opacity, translate, scale, rotate, blur and free CSS. Preview on a box, circle, text, button or card, played on load, on hover or on click. Output comes as CSS with an optional reduced motion block, -webkit- prefix and minify, plus @keyframes only, shorthand, a Tailwind config and Web Animations JavaScript.

Always freeNo sign upRuns in your browser
Play me

Keyframes

.my-animation {
  animation: my-animation 600ms ease 0ms 1 normal both;
}

@keyframes my-animation {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .my-animation {
    animation: none;
  }
}
Duration600ms
Delay0ms

Timing function

Respect reduced motion
Add -webkit- prefix
Minify CSS

How to use

01

Pick a preset and name

Choose one of the 50 presets from the grouped list, then type a name. Names must start with a letter, underscore or hyphen; an invalid name is replaced with my-animation. Click Edit steps to change the keyframes.

02

Set timing and replay

Set Duration and Delay, pick a named easing, draw a custom curve or use steps, then choose iteration count, direction and fill mode. Pick a trigger and press Replay to watch it again.

03

Copy the code

Pick CSS, @keyframes, Shorthand, Tailwind or JavaScript, then copy or download the .css file. Switches add a reduced motion block, the -webkit- prefix or minified output.

Why CSS Animation Generator

The animation shorthand: order and defaults

The generated line packs several properties into one. Most can appear in any order, but the first time value is always the duration and the second is the delay. The name can go anywhere, though putting it first is easiest to read.

Any property you leave out of the shorthand is reset to its default. That matters when you override an animation later: writing animation: my-animation 1s on a hover rule also resets the fill mode to none and the iteration count to 1. To change one thing, use the longhand property, such as animation-duration.

PropertyIn the generated lineDefault if left out
animation-namemy-animationnone
animation-duration600ms0s
animation-timing-functioneaseease
animation-delay0ms0s
animation-iteration-count11
animation-directionnormalnormal
animation-fill-modebothnone
animation-play-statenot writtenrunning

Common questions

Which presets does the CSS animation generator include?
50 in six groups. Entrance and exit cover fades, slides, scales, zooms, puffs, blurs, rotations and flips. Attention has bounce, pulse, heartbeat, shake, wobble, jello, rubber band, swing, tada, vibrate and flicker. Text, loop and background groups add tracking, focus, spin, ping, float and gradient pans.
How do I make a CSS animation loop forever?
Set Iteration count to infinite. For bounce and pulse, also set Direction to alternate so each cycle plays forward then backward. The Loop group presets such as spin and float already suggest infinite when you pick them.
Why does my element disappear after an exit animation?
With fill mode both or forwards, the element keeps the last keyframe after the animation ends. For fadeOut that means opacity 0. That is usually what you want before removing the element; set Fill mode to none if it should come back.
What does animation-fill-mode do?
It decides what the element shows outside the running time. forwards keeps the last frame, backwards applies the first frame during the delay, both does both, and none returns to the normal styles. The default here is both, which avoids a flash before a delayed entrance.
Can I edit the keyframe percentages in this animation tool?
Yes. Click Edit steps and each keyframe becomes a row with a selector such as 0%, 50% or 0%, 100%, fields for opacity, translate, scale, rotate and blur, and an Other CSS field. Add, remove and reorder steps; invalid selectors are flagged and left out.
How do I make a custom easing curve for a CSS animation?
Choose Custom curve under Timing function and drag the two control points, or type the four values. Y values above 1 or below 0 make the motion overshoot. The same editor is available as a standalone cubic-bezier generator for transitions.
Can I use a custom name for my @keyframes animation?
Yes. Type it in the Name field and the @keyframes rule, the class and the shorthand update together. Use letters, digits, hyphens and underscores, and do not start with a digit. If the name is not valid, the tool uses my-animation and shows a message.
Can I use the generated animation in Tailwind CSS?
Yes. The Tailwind tab writes a tailwind.config.js snippet that adds your keyframes and an animation entry, so you can use animate-my-animation. It also shows an arbitrary animate-[...] class for one-off use, which still needs the keyframes defined.
How do I play a CSS animation on hover or click?
Pick On hover or On click as the trigger. For hover, the CSS tab puts the animation on a :hover selector. For click, it adds a short JavaScript note that removes and re-adds the class, which is how a CSS animation restarts.
Should CSS animations respect reduced motion settings?
Yes. Some people turn on reduced motion because movement makes them unwell. Leave Respect reduced motion on and the CSS includes a @media (prefers-reduced-motion: reduce) block that sets animation: none for your selector.

More CSS tools

View all

CSS Clip Path Generator

Visual clip-path editor with SVG import and PNG tracing

CSS

CSS Gradient Generator

Build linear, radial and conic gradients

CSS

CSS Box Shadow Generator

Build layered box shadows with presets

CSS

CSS Border Radius Generator

Round corners, per corner or as blobs

CSS