Animation Settings
Adjust duration, timing, delay, iteration, direction and fill mode.
Generated CSS
About the Animation Preview
The CSS Animation Preview tool lets you test animation presets with full control over duration, timing function, delay, iteration, direction, and fill mode. See the animation live and copy the complete CSS including the @keyframes definition.
How to Use the Animation Preview
- Choose an animation preset from the dropdown (14 options).
- Adjust duration, timing function, delay, iteration, direction, and fill mode.
- Click Replay to preview the animation on the box.
- Click Copy CSS to copy the @keyframes + animation property.
Why Choose AllOmnitools?
Live animation preview with one click.
Everything runs in your browser. No data sent anywhere.
Frequently Asked Questions
What is fill mode?
"forwards" keeps the element in its final animated state. "backwards" applies the first keyframe during the delay. "both" applies both behaviors.
What is animation direction?
"alternate" makes the animation play forward then backward on each cycle. "reverse" plays the keyframes in reverse order.
Can I use these animations in React?
Yes. Copy the CSS into a stylesheet or CSS module and apply the class to your component. The animations are pure CSS with no dependencies.