Transitions.dev
Curated collection of smooth CSS View Transitions and page transitions for modern web frameworks and Astro sites.
Overview
Transitions.dev is a curated interactive library of modern CSS View Transitions API snippets and cross-page animations designed for Astro, Next.js, and modern browsers.
Key Features
- Native View Transitions API: 100% pure CSS-driven animations leveraging modern browser native transition protocols.
- Seamless Framework Integration: Ready-to-use snippets for Astro ViewTransitions, Nuxt, and SPA routing.
- Zero Runtime Performance: Smooth 60fps compositor-thread transitions with zero heavy animation JS libraries.
- Interactive Visual Playground: Live-test different slide, morph, and crossfade transition directions.
Installation & Quick Start
/* Add to global stylesheet */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.3s;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}Why Choose Transitions.dev?
- Best for: Astro sites, documentation portals, and Next.js applications seeking smooth app-like page navigation.
- Not suitable for: Legacy browsers without CSS View Transitions API support.
Comments & Discussion
No comments yet. Be the first to share your experience or thoughts!
Related libraries
Curated by category & stack
Kinetics (Colorion)
A library of 150+ spring-driven micro-interactions for web apps. Copy the CSS, React, or ready-made AI prompts to ship physics-based motion instantly.
23rd
An open-source shadcn/ui registry of opinionated, tasteful components by radiumcoders — WebGL shaders, playful 404s, and interactive showpieces you copy, paste, and own.
nxui (Vue)
A collection of 230+ beautiful animated Vue 3 components built with Tailwind CSS v4 and motion-v. Copy, paste, and ship with Nuxt 4 and shadcn-vue.