RubanTools
Suggest a Tool

CSS Animation Generator

Build CSS @keyframe animations visually - add stops, set properties at each %, preview live, and copy the CSS instantly.

Animation Settings
s
Keyframe Stops
Live Preview

CSS Animation FAQ

@keyframes defines the intermediate steps in a CSS animation. Each stop (0%–100%) specifies the CSS values at that point in time. The browser interpolates smoothly between stops. You apply the animation with the animation shorthand property on any element.

Animate transform (translate, scale, rotate) and opacity - they are GPU-accelerated and do not trigger layout recalculation. Avoid animating width, height, top, left, or margin - they force expensive repaints on every frame.

forwards: element retains the last keyframe state after animation ends. backwards: applies the first keyframe during the delay period. both: applies both rules. none: element returns to its original style after the animation.