3D cube
3D cube snippet with a live demo, copyable CSS, and implementation prompt.
3D flip card
3D flip card snippet with a live demo, copyable CSS, and implementation prompt.
3D perspective tilt
3D perspective tilt snippet with a live demo, copyable CSS, and implementation prompt.
Animated gradient background
A smooth color-shifting gradient background using oversized background-size and animated background-position.
Animated underline link
Hover-triggered underline animation using background-size.
Arrow move
Arrow move snippet with a live demo, copyable CSS, and implementation prompt.
Background fill
Hover effect that fills an element's background from left to right using a pseudo-element transition. Pure CSS, keyboard-accessible.
Bezier curve path
Move an element along a custom cubic bezier curve using CSS offset-path, with the element rotating to face its direction of travel.
Blur in
A CSS blur-in entrance animation using filter blur and opacity for a smooth focus-reveal effect.
Blur reveal
A CSS blur reveal effect. Content starts blurred and sharpens on hover using filter: blur() with a smooth transition — no JavaScript.
Border draw
A CSS border draw effect. The border traces itself on hover using pseudo-elements and scaleX/scaleY transitions — no JavaScript.
Border transition
Animate border-color, border-width, and border-radius with CSS transitions. Smooth hover effects without layout shifts. Live demo and copy CSS.
Bounce Easing
Modern CSS bounce easing using the linear() function for realistic drop and bounce animations.
Bounce in
A CSS bounce-in entrance animation with elastic easing for playful, attention-grabbing element reveals.
Bounce
A CSS keyframe bounce animation. Continuous or one-shot, with prefers-reduced-motion support. Copy and go.
Breathe
A slow CSS scale animation that mimics a breathing rhythm — gentle expand and contract for calm, ambient UI elements.
Card expand to detail
Expand a card into a full detail view with a smooth CSS transition. Uses View Transitions or transform + opacity for the morph effect.
Circle path
Animate an element along a circular orbit using CSS offset-path. A planet-style motion path with pure CSS — no JavaScript.
Clip-path reveal
A CSS clip-path reveal animation that unveils elements with geometric shapes like circles and polygons.
Color shift
A CSS color shift effect. Smoothly transitions background color on hover using oklch() values — no JavaScript.
Color transition
Smooth CSS color transitions using oklch interpolation. Hover swatches to see perceptually uniform color shifts. Live demo and copy CSS.
Counter animation
Animate a numeric counter in pure CSS using a digit roller (translateY + steps()). Great for stats, dashboards, and loading states—no JavaScript.
cubic-bezier custom easing
Create custom animation timing curves with cubic-bezier(). Go beyond ease-in and ease-out with precise control over acceleration.
Delay chain transition
Stagger CSS transitions with incremental transition-delay values to animate elements sequentially.
Drop in
Drop in snippet with a live demo, copyable CSS, and implementation prompt.
Entry/exit transition
Smooth element entrance and exit animations using @starting-style and transition-behavior.
Expand/grow
Expand/grow snippet with a live demo, copyable CSS, and implementation prompt.
Fade in entrance
CSS-only fade-in animation with @starting-style for element entry.
Flash
A CSS keyframe flash animation — rapid opacity blinks for alerts, notifications, and attention-grabbing UI moments.
Flip in
A CSS flip-in entrance animation using rotateX or rotateY with perspective for a 3D card-flip reveal.
Flip reveal
Flip reveal snippet with a live demo, copyable CSS, and implementation prompt.
Float
Gentle floating animation using CSS keyframes with translateY, like a UI element hovering in space.
Glow effect
Hover-triggered neon glow effect using box-shadow and text-shadow with oklch() colors. Smooth transition, keyboard-accessible, no JavaScript.
Gradient shift
Gradient shift snippet with a live demo, copyable CSS, and implementation prompt.
Heartbeat
A CSS keyframe heartbeat animation — a scale pulse that mimics a heartbeat rhythm for icons and notification badges.
Hero morph transition
Morph a hero element between two layouts using View Transitions — image and heading animate to new positions.
Icon slide
A CSS icon slide effect — an arrow icon shifts right on hover using transform: translateX. No JavaScript. Copy and go.
Image zoom transition
Smooth image zoom on hover using CSS transform: scale() with overflow hidden. GPU-composited and performant.
Individual transform properties
Individual transform properties snippet with a live demo, copyable CSS, and implementation prompt.
Jello
A CSS keyframe jello effect — alternating scaleX/scaleY to simulate a gelatinous squish for playful UI feedback.
Lift with shadow
A hover effect that lifts an element upward and deepens its shadow. Perfect for cards, buttons, and interactive surfaces.
linear() multi-point easing
Create custom easing curves with the linear() function — multi-point timing for bounce, elastic, and spring-like animations.
List reorder transition
Animate list items to their new positions when reordered using View Transitions or CSS techniques.
Magnetic hover
Magnetic hover snippet with a live demo, copyable CSS, and implementation prompt.
Marquee
CSS-only infinite scrolling ticker using animation and translateX with no JavaScript required.
Mask reveal
Reveal an element with a soft edge using CSS masks. Animate mask-position and mask-size for a modern wipe effect, with a reduced-motion fallback.
Morph transition
Morph an element between two shapes using CSS view-transition-name and @keyframes.
Morphing shape
Morphing shape snippet with a live demo, copyable CSS, and implementation prompt.
Multi-property transition
Transition multiple CSS properties simultaneously, each with its own duration and easing — no JavaScript required.
Navigation transition
Animate page navigations with the View Transitions API. Cross-fade, slide, or custom animations between routes.
Orbit path
Make an element orbit in a perfect circle using CSS offset-path with a circle() shape, no transform tricks needed.
Page fade transition
A smooth page fade-in and fade-out effect using CSS View Transitions API. The native way to animate between page states.
Page slide transition
Slide between pages using the View Transitions API with a CSS slide animation.
Parallax layers
Parallax layers snippet with a live demo, copyable CSS, and implementation prompt.
Perspective tilt on hover
Perspective tilt on hover snippet with a live demo, copyable CSS, and implementation prompt.
Pulse
A CSS pulse animation that scales an element up and back. Great for notification dots, live indicators, and attention cues.
Rotate gallery
Rotate gallery snippet with a live demo, copyable CSS, and implementation prompt.
Rotate in
A CSS rotate-in entrance animation combining rotation and opacity for dramatic element reveals.
Rotate
Rotate snippet with a live demo, copyable CSS, and implementation prompt.
Rubber Band
A CSS keyframe rubber band animation featuring elastic scale3d() stretch and snap-back effects.
Scale card interaction
Scale card interaction snippet with a live demo, copyable CSS, and implementation prompt.
Scale in
A CSS scale-in entrance animation using transform scale and opacity for elegant element reveals.
Scale on hover
A smooth scale-up effect on hover using CSS transform and transition. Works on cards, images, buttons, and any element.
Scroll progress bar
Scroll-driven reading indicator with animation-timeline: scroll().
Shadow grow
A CSS shadow grow effect. A card's box-shadow intensifies on hover with a smooth transition — no JavaScript.
Shadow transition
Animate box-shadow on hover for lift, glow, and depth effects with CSS transitions. Performance tips included.
Shake
CSS keyframe animation that shakes an element horizontally for error feedback.
Shared element transition
Animate a shared element between two states using view-transition-name. The element morphs position and size seamlessly. Live demo, copy CSS.
Shine/gloss sweep
Shine/gloss sweep snippet with a live demo, copyable CSS, and implementation prompt.
Size transition
Transition height, width, and auto sizes with CSS. Includes the interpolate-size: allow-keywords approach.
Skew banner
Skew banner snippet with a live demo, copyable CSS, and implementation prompt.
Slide left
A CSS slide-left entrance animation using translateX and opacity for smooth element reveals. (under 160 chars)
Slide right
A CSS slide-right entrance animation using translateX and opacity for smooth element reveals.
Slide-up
Entry animation that slides an element up from below with a fade-in. Uses @keyframes with transform and opacity for smooth GPU compositing.
Spin
A continuous 360° rotation animation. Perfect for loading spinners and refresh indicators. Two lines of CSS.
CSS loading spinner
A pure CSS loading spinner using keyframes and border, with prefers-reduced-motion support.
Spring easing
Simulate spring physics with CSS linear() easing — multi-point curves that bounce and settle like a real spring.
Squish/press
Squish/press snippet with a live demo, copyable CSS, and implementation prompt.
Staggered entrance
CSS staggered entrance animation using animation-delay and custom properties for sequential element reveals.
@starting-style entrance
@starting-style entrance snippet with a live demo, copyable CSS, and implementation prompt.
Steps easing comparison
Compare CSS steps() easing values side by side — steps(4), steps(8), steps(12), steps(1, jump-both), and linear. Copy and go.
Steps Easing
CSS steps() easing for frame-by-frame animations — tick clocks, sprite sheets, and typewriter effects without JavaScript.
SVG path follow
Make a CSS element follow an arbitrary SVG path exactly, using offset-path with a path() definition extracted from SVG.
Swing
A CSS keyframe swing animation — a pendulum-style rotation around the top center for icons and hanging elements.
Tab switch transition
Animate between tab panels with a smooth cross-fade or slide using CSS transitions and the View Transitions API.
Tada
A CSS-only tada animation — a playful scale-and-rotate attention grabber. Copy and go.
Tilt/perspective
A CSS tilt/perspective hover effect. A card rotates in 3D on hover using perspective() and rotateX/rotateY transforms — no JavaScript.
Timing function comparison
Compare CSS easing functions side by side — ease, ease-in, ease-out, ease-in-out, linear, and cubic-bezier in a live animated demo.
transition-behavior: allow-discrete
Use transition-behavior: allow-discrete to animate normally non-animatable properties like display and visibility.
Translate carousel
Translate carousel snippet with a live demo, copyable CSS, and implementation prompt.
Typewriter text
A pure CSS typewriter text animation using steps() timing and a blinking cursor with border-right.
Underline slide in
An animated underline that slides in from left on hover using a pseudo-element and scaleX transform. Perfect for navigation links.
Wave path
Animate an element along a wave-shaped path using CSS offset-path with an SVG path definition.
Wave
A CSS wave animation using sequential staggered translateY on a row of elements to create a flowing ripple effect.
Wobble
A CSS keyframe wobble animation — a rotation-based attention effect for UI feedback.