Advertisement
Guide
About the CSS Keyframes Generator
CSS animations come in two halves: a @keyframes block saying what changes and when, and an animation property saying how to play it. Writing them by hand means reloading repeatedly to see the result.
This builds both halves, with the animation running live as you edit.
Animate transform and opacity, not layout
transform and opacity can be handled by the compositor without recalculating layout or repainting, so they stay smooth even on a busy page. Animating width, top or margin forces layout on every frame and is the usual cause of janky CSS animation. That is why this generator exposes those two properties.
What fill-mode actually does
By default an element snaps back to its original styles the moment the animation ends — which is why a fade-in often flashes back to invisible. forwards keeps the final keyframe, backwards applies the first keyframe during the delay, and both does both. For entrance animations you almost always want both.
Percentages, not just from and to
from and to are just aliases for 0% and 100%. Intermediate stops are what give an animation character — a bounce needs an overshoot around 40%, and a pop-in reads better if it passes slightly beyond its final size before settling.
Respect reduced motion
Some people disable animation at the system level because motion makes them unwell. Wrap decorative animations in @media (prefers-reduced-motion: no-preference), or reduce them to a simple opacity fade when the preference is set. It is two lines of CSS and it matters.
How to use it
- 1Start from a preset, or build from scratch.
- 2Drag a stop’s percentage and set its transform and opacity.
- 3Tune duration, timing, delay, direction and repeat.
- 4Copy the @keyframes block and the animation shorthand.
Frequently asked questions
Why does my element jump back at the end?
Because animation-fill-mode defaults to none, so the element reverts to its original styles. Set it to forwards or both to keep the final keyframe.
Which properties are safe to animate?
transform and opacity, because the compositor handles them without layout or paint. Animating width, height, top or margin triggers layout on every frame and causes jank.
What is the difference between from/to and percentages?
None — from is 0% and to is 100%. Percentages simply let you add stops in between, which is where most of the character of an animation comes from.
How do I run the animation only once?
Set the repeat count to 1 instead of infinite, and usually set fill mode to forwards so the end state persists.
Does the generated CSS handle reduced motion?
No — that guard is not included. Wrap the animation in @media (prefers-reduced-motion: no-preference) for anything decorative.