Configure, preview, and export CSS animations in one place

Pick an effect from Animate.css, tweak duration, delay, iterations, and trigger. See a live preview and copy clean HTML / CSS / JS code for your project.

▶ Live preview ⚙️ Triggers: load • hover • click • scroll 📦 4 quick presets

Performance tip: download animate.min.css
and place it on your server for maximum speed.

1. Configure animation

Pick effect, presets, element type and parameters

Wizard

Quick presets Load ready-to-use configurations

Element type What do you want to animate?

Animate.css effect Filter by name or select from the list

🔍

Core CSS parameters Duration, delay, iterations…

Duration e.g. 1s

Delay e.g. 0s

Iterations 1, 2, 3, infinite…

Timing

Direction

Fill mode

Trigger When the animation should start

On load

Hover

Click

On scroll (in view)

Custom CSS class Used in the generated HTML

2. Live preview

See how the trigger behaves on a real element

Preview

Example animated element Hover, click, or scroll depending on the selected trigger.

Tip: test both desktop and mobile behavior. The generated code uses Animate.css plus a small amount of vanilla JS.

3. Ready-to-copy code

Clean HTML, CSS and JavaScript for Animate.css

Copied!