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.
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.
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.
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.
Drop in
Drop in snippet with a live demo, copyable CSS, and implementation prompt.
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.
Icon slide
A CSS icon slide effect — an arrow icon shifts right on hover using transform: translateX. No JavaScript. Copy and go.
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.
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.
Morphing shape
Morphing shape snippet with a live demo, copyable CSS, and implementation prompt.
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.
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.
Shake
CSS keyframe animation that shakes an element horizontally for error feedback.
Shine/gloss sweep
Shine/gloss sweep snippet with a live demo, copyable CSS, and implementation prompt.
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.
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.
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.
Multi-property transition
Transition multiple CSS properties simultaneously, each with its own duration and easing — no JavaScript required.
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.
Entry/exit transition
Smooth entrance and exit animations using @starting-style and transition-behavior for bidirectional transitions.