Transitions & Animations
Page transitions, view transitions, theme toggles and entry/exit animations.
How to create smooth transitions between element states? These 50 CSS transition effects cover all patterns: fade in/out, slide, flip, morph, expand and page transitions. Each transition uses CSS best practices with custom Bezier curves for a professional result.
Fade Through
The page gradually fades to black then reveals the new page.
Slide Over
New content slides over the old from left to right.
Circle Reveal
A circle expands from the center to reveal the new page.
Curtain Open
Two panels open like theater curtains.
Diagonal Wipe
A diagonal line sweeps across the screen to reveal the new content.
Pixelate Dissolve
The screen breaks into pixels that appear and disappear.
Flip Page
The page flips over like a book.
Zoom Through
Zoom into the screen center then zoom out on the new page.
Blinds Effect
Horizontal blinds close then open to reveal the new page.
Morph Transition
A shape morphs and expands to cover the screen then shrinks back.
Crossfade Transition
Smooth crossfade between two states. Simulates the native crossfade of the View Transitions API.
Slide Transition
Content slides left while new content comes in from the right, like page-to-page navigation.
Scale Morph
The element changes size, shape and color with an elastic animation curve.
Fade & Slide Up
Content fades out upward and new content rises from the bottom. Ideal for profiles and cards.
Flip Transition
The card performs a 3D rotation to reveal different content on the back. Classic and elegant effect.
Zoom Transition
Zoom-in effect that enlarges the view to transition to a new detailed state. Perfect for galleries.
Circular Reveal
New content reveals itself with an expanding circle via clip-path. Ideal for theme toggles.
Stagger List
List items exit one by one with staggered delays, then new items appear progressively.
Page Turn
Simulates a 3D page turn effect to reveal the next page. Inspired by e-readers and digital books.
Dark Mode
Dark theme active
Light Mode
Light theme active
Circular Reveal
Theme toggle with circular reveal via clip-path: circle() from the top-right button.
Smooth Fade
Theme transition via cross-fade opacity with sun/moon icon morphing.
Slide Wipe
Horizontal wipe with clip-path: inset() and a luminous separation line crossing the screen.
Color Morph
Theme transition entirely driven by CSS custom properties with transition on each variable.
Icon Toggle
Theme button with rotational morphing between sun and moon icons. Combined rotation and scale.
Card Theme
Complete card with avatar, text and buttons where each element transitions between the two themes.
Gradient Shift
Gradient background shifting from cool nighttime hues to warm golden tones in 0.8s.
Adaptive UI
Miniature interface (nav, content, blocks) that toggles between dark and light theme on click.
Split Compare
Side-by-side comparison of both themes with a luminous central separator and "VS" label.
Pixelate Transition
Pixelated transition: colored blocks appear in random cascade to reveal the new theme.
Popover Bloom
The element blooms open from its anchor point with scale + opacity via @starting-style.
Dialog Curtain
Modal that opens like stage curtains, separating from the center.
Stage Curtain Dialog
Content appears after the curtains open.
Toast Cascade
Stacked toast notifications with fluid entry, reordering and graceful exit.
Card Vanish
The card dissolves into particles on removal and materializes from particles on entry.
List Item Slide
Elements slide in from the side with staggered delays and collapse on removal.
Accordion Fold
Content sections that fold/unfold like paper with 3D perspective transforms.
Morph Transition
The element morphs shape/position transitioning from display:none to display:block with allow-discrete.
Portal Open
Content appears through an expanding circular mask, like a portal opening.
Flip Card Entry
Elements pivot from the back face with 3D rotation to reveal content.
Fade Through Color
Elements pass through a brand color (not just opacity) during entry/exit.
Motion Design
Staggered Reveal
Elements appearing in cascade with progressive delay for a coordinated effect.
Elastic Spring
Spring animation with physical bounce and realistic elastic deformation.
Orchestrated Motion
Coordinated multi-element animation After Effects-style with synchronized timing.
Kinetic Wave
Wave propagation through a dot grid with progressive delay.
Inertia Momentum
Movement with inertia and natural deceleration: drag the cube and watch it slow down.
SVG Path Follow
Element following a complex SVG path with a fluid animation along the curve.
Character Cascade
Text with character-by-character animation, each letter appears individually.
3D Flip Sequence
Chained 3D flip sequence with delay between each card for a domino effect.
Shape Morph Transition
Fluid transition between geometric shapes: circle, organic blob, square, and back.
Timeline Choreography
Multi-step synchronized timeline sequence with animated progress bars.
View Transitions Page Reveal
Smooth morph between a grid and its detail view using the browser's native View Transitions API. Automatic fallback if unsupported.
Cross-Document Page Morph
Smooth transition between two real pages (multi-page): the shared element morphs from one page to the other via the native View Transitions API, without a single line of JavaScript. The SPA feel, without the SPA cost.
💡 Perfect for: blog list→article, e-commerce listing→product page, portfolio→case study, docs, any multi-page site.