- 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 1s 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.5s ease 0.2s; /* 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
### 2\. Match Content Type
Content
Suggested Transition
Cover/Title
`fade`
Regular content
`slide-left`
Section break
`fade` or `zoom`
Demo/Code
`fade`
Conclusion
`fade`
### 3\. Keep It Subtle
❌ **Too flashy**
.crazy-enter-active { animation: spin 2s, bounce 1s, flash 0.5s; }
✓ **Professional**
.subtle-enter-active { transition: opacity 0.3s ease; }
### 4\. Consider Audience
* Technical presentations: Minimal transitions
* Creative presentations: More freedom
* Long presentations: Less distracting
### 5\. 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.3s ease; } .pro-fade-enter-from, .pro-fade-leave-to { opacity: 0; }
/* Smooth slide */ .pro-slide-enter-active, .pro-slide-leave-active { transition: all 0.35s ease-out; } .pro-slide-enter-from { opacity: 0; transform: translateX(30px); } .pro-slide-leave-to { opacity: 0; transform: translateX(-30px); }
### Playful Set
/* Energetic bounce */ .playful-enter-active { animation: pop-in 0.4s 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:**
1. Cover slide: \[transition\]
2. Content slides: \[transition\]
3. Section breaks: \[transition\]
4. Conclusion: \[transition\]
**CUSTOM CSS (if needed):**
.[name]-enter-active { ... } .[name]-leave-to { ... }