A restrained entrance
Gentle entrance moves an element upward from 35px below its destination while fading in and growing from 94% to 100% size.
Animation settings
Motion preview
✦
Motion starts only when you press Play. Editing a setting stops it. The downloaded CSS includes a reduced motion media query. The preview returns to its neutral state after a finite run; CSS fill mode controls the element after playback on your site.
Apply animated to your element. Translation, rotation, and scale share one transform; combine this rule with existing transforms carefully. The preview clips large movements to its stage.
Inputs and previews are processed locally in your browser. No external color or design API is used.
How to use the CSS Animation Generator
- 01
Choose a preset and set duration, delay, iteration count, easing, and direction.
- 02
Edit the start and end translations, rotation, scale, and opacity.
- 03
Press Play to preview; Stop or change a setting to halt the motion.
- 04
Copy or download the keyframes and animation rule, including the reduced motion query.
Examples
A looping pulse
Soft pulse alternates between two scale and opacity values. Alternate direction avoids an abrupt jump back to the beginning after each iteration.
Timing and direction
Duration describes one iteration, while delay waits before the sequence begins. Normal runs from the first to the second keyframe; reverse flips that order. Alternate switches direction each iteration. Fill mode determines whether keyframe values apply outside the active interval. The preview resets to a neutral tile after a finite run so it is ready to replay.
Keep movement deliberate
The export animates transform and opacity, with a fixed transform order of translation, rotation, then scale. An existing transform on the same element needs to be combined or moved to a wrapper. A reduced motion media query removes the exported animation. In the editor, an active device preference also disables playback and stops a running preview.
Common questions
Why does Play stay disabled?
Your device may request reduced motion, or a setting may be invalid. The editor respects the device preference and displays validation messages for unsupported values.
Does the export include the blue tile?
No. The file contains the animated class, keyframes, and reduced motion rule. Apply the class to your own element and keep its visual styling separate.
Why is a large movement clipped?
The stage contains the preview so it does not cover surrounding controls. The exported transform can move outside the element’s original box unless an ancestor clips it.