Donaldson R F CSS Animation Generator
Design a CSS keyframe animation, watch it play, and copy the ready-to-use code.
Keyframes
How CSS animations work
A CSS animation has two parts: @keyframes, which describe how properties change between percentages of the timeline, and the animation property, which sets the name, duration, easing, delay, repeat count, direction and fill mode. Animating transform and opacity is the smoothest option because browsers can run them on the graphics card.
Add the generated class to any element. To respect people who prefer less motion, wrap your animation in @media (prefers-reduced-motion: no-preference) { … } — the generator includes this by default. Related: CSS gradient generator.