slidev-transitions

Slidev transitions are configured by adding transition properties such as slide-left, fade, or zoom to the frontmatter. Global settings apply to all slides, while per-slide YAML overrides enable targeted custom animation effects for specific content.

Available Slidev transition styles include directional options like slide-left, slide-right, slide-up, slide-down, along with fade and zoom. These named transitions support forward and backward pairs for natural navigation flow between presentation slides.

Custom CSS animations for Slidev transitions are created by defining CSS classes that follow Vue transition naming conventions. Optional styles files hold these classes, enabling bespoke animation effects beyond the built-in named transitions.

Slidev supports the View Transitions API for element-preserving animations, such as morphing hero elements between slides. Leveraging these view-transition features requires using a browser that supports the View Transitions API.

Overriding a global Slidev transition for a single slide involves specifying a different transition property within that slide's YAML frontmatter. This per-slide configuration replaces the global frontmatter setting for that specific slide only.

Slidev View Transitions API features need a browser with View Transitions API support. Without this browser capability, element-preserving view-transition animations will not render, though standard named and CSS transitions remain functional.