Animation Component

CSS animation utilities — rotation, bounce, fade, scale, spring, fly, and more.

Notes

Use animate-[effect-name] to apply an animation.
Append -[ms] to override duration dynamically, e.g. animate-fade-in-500.
Combine with animate-infinite for continuous loops, or animate-once (default) for single play.
Click a single-shot demo block to replay the animation.

Multiple time formats are supported:

1. Integer value, e.g. *-100 (100ms)
2. Bracketed integer, e.g. *-[100] (100ms)
3. Bracketed time string, e.g. *-[100ms], *-[2s]

Rotation (single)

animate-rotate-cw-360

CCW

animate-rotate-ccw-360

Rotation (infinite)

animate-circle-cw-360

CCW

animate-circle-ccw-360

Remind

animate-remind-x

animate-remind-y

Float

animate-float-x

animate-float-y

Bounce

animate-bounce-y

animate-bounce-x

Blink

animate-blink

Heartbeat

♥

animate-heartbeat

Shake

animate-shake-x

animate-shake-y

animate-shake-z

Fade

animate-fade-in

Out

animate-fade-out

animate-fade-in-up

Out Up

animate-fade-out-up

Down

animate-fade-in-down

Out Dn

animate-fade-out-down

Start

animate-fade-in-start

Out St

animate-fade-out-start

End

animate-fade-in-end

Out End

animate-fade-out-end

Ease (vertical scale)

animate-ease-in

Out

animate-ease-out

Top

animate-ease-in-top

Out T

animate-ease-out-top

Bot

animate-ease-in-bottom

Out B

animate-ease-out-bottom

Start

animate-ease-in-start

Out St

animate-ease-out-start

End

animate-ease-in-end

Out En

animate-ease-out-end

Spring

animate-spring-in

Out

animate-spring-out

Scale

animate-scale-in

Out

animate-scale-out

Fly

St In

animate-fly-in-start

St Out

animate-fly-out-start

End In

animate-fly-in-end

End Out

animate-fly-out-end

Up In

animate-fly-in-up

Up Out

animate-fly-out-up

Dn In

animate-fly-in-down

Dn Out

animate-fly-out-down

Rotate Fade

animate-rotate-in

Out

animate-rotate-out

Dynamic duration examples

200ms

animate-fade-in-200

500ms

animate-fade-in-500

1000ms

animate-fade-in-1000

[2s]

animate-fade-in-[2s]

500ms

animate-circle-cw-360-500

2000ms

animate-circle-cw-360-2000