Free · Copy the exact two classes

Animate.css Class Helper for Kids

Choose and preview an effect, then copy the real Animate.css class names for a project.

  • Clear, kid-friendly steps
  • Private in your browser
  • No signup
One clear motion

Animation class helper

Choose an effect, preview it, and copy the exact Animate.css class.

Private and local
Your next stepBuild the classes for a bouncing entrance.
Start with an example
Progress 0%
Live Animate.css previewbounceIn
1.0 seconds · 1 play
My elementanimate__bounceIn

Your device motion setting is respected. Nothing moves until you press Preview.

Classes for this effectanimate__animated animate__bounceIn

Save your animation

Keep a working HTML page, a still PNG, or an editable local project.

Your words and project stay in this browser. Motion uses the exact Animate.css 4.1.1 MIT release.

Powered by Animate.css, an open-source library available under MIT.

Three simple steps

How to use it

  1. Pick a ready example or choose one animation effect.
  2. Press Preview, then pause, replay, or change the speed.
  3. Save a working HTML page, a still PNG, or a local project.

Private by default

Your words and choices stay in this browser tab. There are no accounts, uploads, ads, or trackers inside the tool. Close the tab and the working data is gone.