CSS Animation Generator
Build CSS @keyframes animations with a live preview — pick a preset (bounce, pulse, shake, fade, slide, rotate, flip, heartbeat, rubber-band, swing) or compose your own from translate, rotate, scale, skew, opacity, and blur at each keyframe stop. Set duration, delay, easing, iteration count, direction, fill mode, and play state. Copy the ready-to-paste @keyframes rule and the animation shorthand. Pairs with the Cubic-Bezier Easing editor and the CSS Loader Generator. Everything runs locally in your browser.
Preset
Timing
Box
Copy the @keyframes rule and the animation shorthand into your stylesheet. The shorthand is animation: name duration delay timing-function iteration-count direction fill-mode play-state. Pairs with the Cubic-Bezier Easing Editor. Runs locally.