Animation Showcase

A collection of 35 CSS animations built with TailwindCSS
Each animation can be controlled with start, pause, stop, and reset buttons.

Showing 35 of 35 animations

Shape Animations (30)

Fade In

Element fades in from transparent to opaque
Duration:2sType:shape

Fade Out

Element fades out from opaque to transparent
Duration:2sType:shape

Bounce

Element bounces up and down with elastic effect
Duration:1sType:shape

Spin

Element rotates 360 degrees continuously
Duration:1sType:shape

Pulse

Element scales up and down rhythmically
Duration:2sType:shape

Ping

Element creates ripple effect outward
Duration:1sType:shape

Slide In From Left

Element slides in from the left side
Duration:2sType:shape

Slide In From Right

Element slides in from the right side
Duration:2sType:shape

Slide In From Up

Element slides in from the bottom
Duration:2sType:shape

Slide In From Down

Element slides in from the top
Duration:2sType:shape

Scale Up

Element grows from small to large
Duration:2sType:shape

Scale Down

Element shrinks from large to small
Duration:2sType:shape

Rotate X

Element rotates around the X axis (3D flip)
Duration:3sType:shape

Rotate Y

Element rotates around the Y axis (3D flip)
Duration:3sType:shape

Shake

Element shakes horizontally like an error
Duration:0.5sType:shape

Wiggle

Element wiggles back and forth playfully
Duration:1sType:shape

Float

Element floats up and down gently
Duration:3sType:shape

Swing

Element swings like a pendulum
Duration:2sType:shape

Jello

Element wobbles like jello
Duration:2sType:shape

Rubber Band

Element stretches and snaps back
Duration:1sType:shape

Heartbeat

Element pulses like a beating heart
Duration:1.5sType:shape

Flip

Element flips 180 degrees
Duration:2sType:shape

Zoom In

Element zooms in from center
Duration:2sType:shape

Zoom Out

Element zooms out to center
Duration:2sType:shape

Morph Shape

Shape morphs between square and circle
Duration:3sType:shape

Glow

Element glows with box shadow animation
Duration:2sType:shape

Color Shift

Element cycles through colors
Duration:4sType:shape

Blur In

Element transitions from blurred to clear
Duration:2sType:shape

Skew

Element skews left and right
Duration:2sType:shape

Orbit

Element moves in a circular orbit path
Duration:4sType:shape

Text Animations (5)

I am animated !!!

Typing Effect

Text appears letter by letter like typing
Duration:3sType:text
I am animated !!!

Text Wave

Letters wave up and down sequentially
Duration:2sType:text
I am animated !!!

Text Glitch

Text has a glitchy digital effect
Duration:0.5sType:text
I am animated !!!

Text Gradient Flow

Gradient flows through the text
Duration:3sType:text
I am animated !!!

Text Blur Reveal

Text reveals from blur effect
Duration:2sType:text