CSS animation gallery
73 animations you can copy straight into a project — every one built in MotionCraft, with the reasoning behind it and a link to open it in the editor.
Loaders
CSS Loading Spinner
A pure-CSS loading spinner built from a rotating SVG arc. Copy the CSS or open it in the editor.
Skeleton Loading Animation
Staggered skeleton placeholder bars that pulse while content loads. Free CSS, no framework.
CSS Pulse Animation
A soft looping pulse for badges, status dots and live indicators.
Ping / Ripple Effect
An expanding ring that fades out — for notifications and live status.
Buttons
Button Hover Effect
A button that lifts on hover and settles on press, using CSS transition — copy-ready.
Button Press Animation
A tactile scale-down on click with a quick, snappy release.
Button Glow on Hover
A coloured halo that grows on hover, for primary calls to action.
Accessible Focus Ring
A keyboard-only focus ring using :focus-visible, so mouse clicks stay clean.
Cards
Card title
Supporting copy goes here.
Card Hover Lift
A card that rises and deepens its shadow on hover. Pure CSS transition.
Pro
Supporting copy goes here.
Pricing Card Highlight
A pricing card that scales and glows to mark the recommended plan.
Card title
Supporting copy goes here.
3D Flip In Animation
A card flipping in on the X axis with perspective. Copy-ready CSS.
Navigation
Animated Tabs Indicator
A tab bar whose active pill slides between tabs instead of jumping.
Accordion Expand Animation
An accordion panel that opens smoothly with its content fading in.
Navbar Slide Down
A navigation bar that drops into place as one piece, with hover states on the links.
Dropdown Menu Animation
A dropdown that drops and fades in from just under its trigger.
Overlays
Confirm action
Supporting copy goes here.
Modal Fade In Animation
A modal that scales up gently while its backdrop fades in behind it.
Toast Notification Slide In
A toast that slides in from the right with a soft overshoot.
Tooltip Fade In
A tooltip that rises a few pixels and fades in, fast enough to feel instant.
Text
Entrances
Bounce In Animation
An element that drops in and bounces to a stop — in pure CSS.
Elastic Entrance Animation
A springy scale-in that wobbles slightly before settling.
Zoom In Animation
A clean scale-up entrance with a slight overshoot.
Card title
Supporting copy goes here.
CSS Fade In Animation
The plainest entrance there is: opacity 0 to 1, nothing else moving.
Card title
Supporting copy goes here.
Fade In Down Animation
Fades in while dropping into place from above.
Card title
Supporting copy goes here.
Fade In Left Animation
Slides in from the left while fading up to full opacity.
Card title
Supporting copy goes here.
Fade In Right Animation
Slides in from the right while fading up to full opacity.
Pop In Animation
Scales up from small with a slight overshoot.
Slide In Left Animation
Enters from the left edge with no fade.
Slide In Right Animation
Enters from the right edge with no fade.
Slide In Up Animation
Rises into place from below without fading.
Slide In Down Animation
Drops into place from above without fading.
Card title
Supporting copy goes here.
Flip In Y Animation
Rotates in around the vertical axis, like a card turning to face you.
Roll In Animation
Rolls in from the left, rotating as it travels.
Blur In Animation
Comes into focus from a blur while fading in.
Card title
Supporting copy goes here.
Back In Down Animation
Drops in from above, overshoots, then settles.
Exits
Card title
Supporting copy goes here.
CSS Fade Out Animation
Fades an element away to nothing.
Card title
Supporting copy goes here.
Fade Out Down Animation
Sinks downward while fading away.
Zoom Out Animation
Shrinks away toward its centre while fading.
Slide Out Right Animation
Leaves toward the right edge, fading as it goes.
Card title
Supporting copy goes here.
Back Out Up Animation
Dips down slightly, then leaves upward.
Blur Out Animation
Defocuses into nothing.
Attention
Shake Animation
A horizontal shake for invalid form input and error states.
Heartbeat Animation
A double-beat pulse for likes, favourites and live counters.
Floating Animation
A slow vertical float for hero images and decorative elements.
Pulsing Glow Effect
A soft glow that breathes in and out — for highlights and active states.
CSS Bounce Animation
A looping bounce that draws the eye without moving anything else.
Vertical Shake Animation
A short shudder up and down, for rejecting input.
Card title
Supporting copy goes here.
Swing Animation
Rocks back and forth around its top edge.
Tada Animation
Scales and wiggles as a small celebration.
Jello Animation
Wobbles like something gelatinous.
Rubber Band Animation
Stretches wide, then narrow, then settles.
Card title
Supporting copy goes here.
Wobble Animation
Lurches side to side while tilting.
CSS Spin Animation
A continuous 360-degree rotation.
Flash Animation
Blinks in and out to demand attention.
Breathe Animation
A slow swell and settle, like breathing.
Reveals
Wipe Up Reveal
Content wipes into view from the bottom edge.
Wipe Right Reveal
Content wipes into view from the left edge rightward.
Iris In Reveal
Opens from the centre outward in a circle.
Card title
Supporting copy goes here.
Curtain Reveal
Opens from the centre outward to both sides.
Slide Reveal Animation
Uncovers from the bottom in one clean sweep.
Circle Open Reveal
A circular window growing to fill the frame.
Diamond Open Reveal
A diamond-shaped window opening outward.
Effects
Neon Flicker Animation
A neon sign struggling to stay lit.
Glitch Animation
Jitters and shifts hue like a corrupted signal.
Wave Animation
Tilts and rises in a slow, continuous swell.
Hue Rotate Animation
Cycles continuously through the colour wheel.
Border Radius Morph
Melts between a square and a circle while turning.
Paths
Want a whole scene, not one animation?
The templates are laid-out screens — heroes, pricing tables, forms — with every part already choreographed.
Browse templatesNeed something that isn’t here?
Build it on a canvas and timeline, or paste animation CSS you already have and edit it visually.
Open the studio