Loading page
About this tool
Create advanced CSS animations easily.
The Animation Generator builds ready-to-paste CSS keyframe animations from 15 presets — fade, slide in four directions, rotate, bounce, scale up and down, pulse, shake, flip, swing and heartbeat — and lets you set every part of the animation shorthand: duration, delay, timing function, iteration count, direction and fill mode. It previews the result live on a sample element and outputs both the @keyframes block and the matching animation property, which you can copy or download as a .css file. It is for front-end developers and designers who want to see how ease-out at 0.6s actually feels before committing it to a stylesheet.
Open CSS Animation Presets on AltFTool — it loads instantly in your browser.
Pick a preset from the Select Animation dropdown — Fade In, Fade Out, Slide Up, Slide Down, Slide Right, Slide Left, Rotate, Bounce, Scale Up, Scale Down, Pulse, Shake, Flip, Swing or Heartbeat — or click one of the Fade In, Bounce, Pulse, Rotate and Shake shortcut badges, then set Duration (s), Delay (s), Easing (ease, linear, ease-in, ease-out, ease-in-out), Iterations (1, 2, 3, 5, 10 or infinite), Direction (normal, reverse, alternate, alternate-reverse) and Fill Mode (none, forwards, backwards, both).
Watch it run on the Preview tab, where a status bar reports the Animation name, the Duration and a Status of Playing or Paused. Click Replay to re-trigger a one-shot animation from the start, or Pause to freeze it — the button then reads Play.
Switch to the CSS Code tab for the Generated CSS: the `.animated-element` rule plus the matching @keyframes block. Copy puts it on the clipboard and briefly reads Copied!, and the Download CSS button saves it as <animation>-animation.css, for example fadeIn-animation.css.
Duration, delay, easing, iterations, direction and fill mode are all editable, so you get the full property, not a name and a duration.
One-shot animations can be re-triggered without reloading, which is the only way to actually judge a 300 ms entrance.
The output is the @keyframes block plus the animation rule — plain CSS with no library, class-name convention or build step attached.
It decides what styles apply outside the animation's running time. `forwards` keeps the final keyframe after the animation ends — which is what you want for a fade-in, otherwise the element snaps back to opacity 0. `backwards` applies the first keyframe during the delay, `both` does both, and `none` does neither.
`ease-in` starts slow and accelerates, so it suits elements leaving the screen; `ease-out` starts fast and decelerates, which is why it reads as more natural for elements entering. `ease` is the CSS default and is a gentler in-and-out curve; `linear` moves at constant speed and is mostly right for continuous rotation.
Set the iteration count to `infinite` — in the shorthand that is the value between the delay and the direction, as in `animation: pulse 1s ease 0s infinite normal forwards`. Pair it with `alternate` direction if you want the animation to run backwards on every second cycle instead of jumping back to the start.
Transform, in almost every case. `transform` and `opacity` can be handled by the compositor without recalculating layout or repainting, so they stay smooth; animating `top`, `left`, `width` or `height` forces layout work on every frame. All the slide and scale presets here use translate and scale for exactly that reason.