CSS Generator

CSS Animation Generator

Choose an effect, adjust its timing, and shape its easing curve. Copy the @keyframes and the property animation ready to paste, with reduced-motion handling included.

Lienzo

Settings

Effect

Animation name This identifies the @keyframes. Use letters, numbers, and hyphens only.

Timing

Duration 0.6 s Delay 0 s Iterations Repeat foreverEquivalent to infinite. Reserve infinite playback for loading indicators or subtle decoration. Direction Fill mode For entrance animations, consider both: it helps prevent a jump at the end and a flash at the start.

Easing curve

Curve

Horizontal: elapsed time. Vertical: animation progress. The amber dot follows the easing curve at the effect's actual pace.

Generated CSS

Looking for another effect? Explore web code, or use the gradient generator to prepare a background for your animation.

Keep timing, keyframes, and accessibility together

A keyframe block describes the intermediate styles. The animation property selects its name, duration, easing, delay, repetitions, direction, and fill mode. Start with a preset or customize opacity and transforms. Inspect the easing curve, pause the preview, and copy either the complete CSS or just the keyframes.

What does fill mode change?

forwards retains the final keyframe after playback; backwards applies the starting keyframe during the delay; both combines them. The generated reduced-motion rule offers an alternative for visitors who request less movement. Test that the final content remains visible.

All CSS generators · My Lienzo · Creative tools