CSS Animation Generator
Note: Keyframe names are global. Two @keyframes fadeIn declarations in different stylesheets do not scope themselves — the one that loads last wins everywhere. Prefix them if the project is large.
Which properties you animate decides whether the result is smooth. Transform and opacity are handled by the compositor and can run on a separate thread at the display's refresh rate. Everything else — width, height, top, left, margin, padding — forces layout to be recalculated on every frame, and on a page with a deep DOM that is where dropped frames come from. Every preset here animates transform and opacity for that reason. A slide-in uses translate rather than left, and the visual result is identical.
The fill mode is the setting people miss. By default an element snaps back to its unanimated state the moment the animation ends, so a fade-in ends with the element invisible again. forwards holds the final keyframe, which is what you almost always want for an entrance. backwards applies the first keyframe during the delay, which stops the element flashing at full opacity before a delayed fade begins.
The generated CSS ends with a reduced-motion block. Movement that is decorative to most people causes real nausea for those with vestibular disorders, and honouring the system setting costs four lines.
Frequently Asked Questions
Why does my element jump back after the animation finishes?
Because animation-fill-mode defaults to none, so the element reverts to its normal styles the instant the animation ends. Set it to forwards to hold the final keyframe. If it also flashes before a delayed animation starts, use both — the value is 'both'.
Should I animate transform or left and top?
Transform, always, when you have the choice. Transform and opacity are composited and can run off the main thread; left, top, width and height each trigger a layout recalculation on every frame. The movement looks the same and the frame rate does not.
When should I use an animation rather than a transition?
A transition needs a state change to react to — a hover, a class being added. An animation runs on its own, can loop, and can have as many intermediate steps as you like. If the movement starts when the element appears, it is an animation.
Do I really need the reduced-motion block?
Yes if anything moves across the screen, scales significantly, or loops. Vestibular disorders are common enough that this is a genuine accessibility requirement rather than a nicety, and the media query is a direct read of a setting the person has already chosen.
