Slide Transitions in Slidev This skill covers adding smooth transitions between slides in Slidev, including built-in transitions, custom animations, and directional transitions. When to Use This Skill Adding polish to presentations Creating smooth navigation experiences Emphasizing slide changes Matching presentation themes Creating unique visual effects Setting Transitions Global Transition (Frontmatter)

transition : slide - left

Applied to all slides in the presentation. Per-Slide Transition

transition : fade

This slide fades in

transition: slide-up

This slide slides up Inline with Separator

Slide 1

transition: zoom

Slide 2 (zooms in) Built-in Transitions Fade Transitions Name Effect fade Simple fade in/out fade-out Fade out, then appear

transition : fade

Slide Transitions Name Effect slide-left New slide enters from right slide-right New slide enters from left slide-up New slide enters from bottom slide-down New slide enters from top

transition : slide - left

View Transition Uses the modern View Transitions API:

transition : view - transition

Note

Requires browser support for View Transitions API. Directional Transitions Forward/Backward Different Use | to separate forward and backward transitions:

transition : slide - left | slide - right

Going forward: slides left Going backward: slides right Common Patterns

Natural slide direction

transition: slide-left | slide-right

Vertical navigation

transition: slide-up | slide-down

Fade forward, slide back

transition: fade | slide-right

Custom Transitions CSS-based Custom Transition Create styles/index.css : / Define custom transition / .my-transition-enter-active , .my-transition-leave-active { transition : all 0.5 s ease ; } .my-transition-enter-from { opacity : 0 ; transform : translateX ( 100 px ) rotate ( 10 deg ) ; } .my-transition-leave-to { opacity : 0 ; transform : translateX ( -100 px ) rotate ( -10 deg ) ; } Use in frontmatter:

transition : my - transition

Transition Classes Slidev uses Vue transition classes: Class When Applied [name]-enter-from Starting state for enter [name]-enter-active During enter transition [name]-enter-to Ending state for enter [name]-leave-from Starting state for leave [name]-leave-active During leave transition [name]-leave-to Ending state for leave Transition Examples Scale Transition .scale-enter-active , .scale-leave-active { transition : all 0.4 s ease ; } .scale-enter-from { opacity : 0 ; transform : scale ( 0.8 ) ; } .scale-leave-to { opacity : 0 ; transform : scale ( 1.2 ) ; } Flip Transition .flip-enter-active , .flip-leave-active { transition : all 0.6 s ease ; transform-style : preserve-3 d ; } .flip-enter-from { opacity : 0 ; transform : rotateY ( -90 deg ) ; } .flip-leave-to { opacity : 0 ; transform : rotateY ( 90 deg ) ; } Blur Transition .blur-enter-active , .blur-leave-active { transition : all 0.5 s ease ; } .blur-enter-from { opacity : 0 ; filter : blur ( 20 px ) ; } .blur-leave-to { opacity : 0 ; filter : blur ( 20 px ) ; } Bounce Transition .bounce-enter-active { animation : bounce-in 0.5 s ; } .bounce-leave-active { animation : bounce-out 0.5 s ; } @keyframes bounce-in { 0% { opacity : 0 ; transform : scale ( 0.3 ) ; } 50% { transform : scale ( 1.1 ) ; } 100% { opacity : 1 ; transform : scale ( 1 ) ; } } @keyframes bounce-out { 0% { opacity : 1 ; transform : scale ( 1 ) ; } 100% { opacity : 0 ; transform : scale ( 0.3 ) ; } } Swipe Transition .swipe-enter-active , .swipe-leave-active { transition : all 0.4 s cubic-bezier ( 0.4 , 0 , 0.2 , 1 ) ; } .swipe-enter-from { opacity : 0 ; transform : translateX ( 100 % ) ; } .swipe-leave-to { opacity : 0 ; transform : translateX ( -100 % ) ; } View Transitions API Basic Usage

transition : view - transition

Named View Transitions < div style = " view-transition-name : hero "

Content that transitions smoothly </ div

Elements with the same view-transition-name on consecutive slides will animate between their positions. Practical Example

transition : view - transition

< div style = " view-transition-name : card " class = " w-32 h-32 bg-blue-500 "

Small card </ div

transition: view-transition

< div style = " view-transition-name : card " class = " w-64 h-64 bg-blue-500 "

Card grows! </ div

Transition Timing Duration .slow-fade-enter-active , .slow-fade-leave-active { transition : all 1 s ease ; / 1 second / } Easing Functions / Common easing functions / .ease-in { transition-timing-function : ease-in ; } .ease-out { transition-timing-function : ease-out ; } .ease-in-out { transition-timing-function : ease-in-out ; } .linear { transition-timing-function : linear ; } / Cubic bezier for custom easing / .custom { transition-timing-function : cubic-bezier ( 0.68 , -0.55 , 0.265 , 1.55 ) ; } Delay .delayed-enter-active { transition : all 0.5 s ease 0.2 s ; / 0.2s delay / } Transition Per Slide Type Different Transitions for Different Content

layout : cover transition : fade

Title Slide

layout: default transition: slide-left

Content Slide

layout: section transition: zoom

Section Break

layout: end transition: fade

Thank You Disabling Transitions No Transition

transition : none

Disable Globally

transition : false

Best Practices 1. Consistency Use the same transition family throughout:

Good: Consistent slide family

transition: slide-left | slide-right

1. Match Content Type Content Suggested Transition Cover/Title fade Regular content slide-left Section break fade or zoom Demo/Code fade Conclusion fade
2. Keep It Subtle ❌ Too flashy .crazy-enter-active { animation : spin 2 s , bounce 1 s , flash 0.5 s ; } ✓ Professional .subtle-enter-active { transition : opacity 0.3 s ease ; }
3. Consider Audience Technical presentations: Minimal transitions Creative presentations: More freedom Long presentations: Less distracting
4. Test Performance Complex transitions may lag on: Large presentations Older devices When exporting to PDF Transition Presets Professional Set / styles/transitions.css / / Gentle fade / .pro-fade-enter-active , .pro-fade-leave-active { transition : opacity 0.3 s ease ; } .pro-fade-enter-from , .pro-fade-leave-to { opacity : 0 ; } / Smooth slide / .pro-slide-enter-active , .pro-slide-leave-active { transition : all 0.35 s ease-out ; } .pro-slide-enter-from { opacity : 0 ; transform : translateX ( 30 px ) ; } .pro-slide-leave-to { opacity : 0 ; transform : translateX ( -30 px ) ; } Playful Set / Energetic bounce / .playful-enter-active { animation : pop-in 0.4 s cubic-bezier ( 0.68 , -0.55 , 0.265 , 1.55 ) ; } @keyframes pop-in { 0% { transform : scale ( 0 ) ; opacity : 0 ; } 80% { transform : scale ( 1.1 ) ; } 100% { transform : scale ( 1 ) ; opacity : 1 ; } } Output Format When configuring transitions:

GLOBAL TRANSITION (first slide)

transition : [ transition - name ] | [ backward - transition ]

Slide content...

PER-SLIDE OVERRIDE (if needed)

transition : [ different - transition ]

Different slide content...

TRANSITION PLAN: Cover slide: [transition] Content slides: [transition] Section breaks: [transition] Conclusion: [transition] CUSTOM CSS (if needed): . [ name ] -enter-active { ... } . [ name ] -leave-to { ... }