slidev-transitions

Configure global and per-slide transitions in Slidev using frontmatter and CSS.

34|1|Updated Jan 25, 2026

Search Tags:#css #presentation #animations #transitions #slidev #view-transition

Ready to run

npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-transitions

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: slidev-transitions
Source: https://github.com/yoanbernabeu/slidev-skills/tree/main/skills/animations/slidev-transitions
Command: npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-transitions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you elevate Slidev presentations by providing a structured approach to adding and managing slide transitions, from simple fades to complex directional and view-based transitions.

Core Features & Use Cases

Global transitions via frontmatter to apply across all slides.
Per-slide and inline transitions to tailor motion for different content.
Built-in transition presets (fade, slide-left, slide-right, slide-up, slide-down) along with custom transitions defined in CSS.
View Transitions API support for modern browsers to create cross-slide effects.
Use Case: Create a polished narrative by controlling how each slide enters and exits, or emphasize key moments with motion.

Quick Start

Use the skill to configure transitions in your Slidev deck. Example: add a global transition in the frontmatter with transition: slide-left; or specify per-slide transitions by adding YAML frontmatter between slides.

Frequently Asked Questions about slidev-transitions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add slide transitions to a Slidev presentation?▼

Add slide transitions to Slidev presentations by defining them in YAML frontmatter. Apply a global transition across all slides or override it per slide to control how content enters and exits during your narrative flow.

What built-in transition presets are available in Slidev?▼

Slidev offers built-in transition presets including fade, slide-left, slide-right, slide-up, and slide-down. These standard CSS animations provide immediate directional movement without requiring custom styling.

Can I use the View Transitions API for Slidev cross-slide effects?▼

Yes, Slidev supports the View Transitions API for modern browsers to create cross-slide effects. This enables sophisticated view-based transitions that smoothly animate elements between different presentation slides.

Do I need extra dependencies to create custom CSS transitions in Slidev?▼

No extra dependencies are required to create custom CSS transitions in Slidev. You only need standard Slidev, YAML frontmatter, and CSS to define and manage unique animations for your technical or creative slide decks.

How do I apply a global transition versus a per-slide transition in Slidev?▼

Apply a global transition by adding the transition property to your presentation's main frontmatter. Specify per-slide transitions by inserting YAML frontmatter between individual slides to override the default global animation.

What is the best way to emphasize key moments in a Slidev deck?▼

The best way to emphasize key moments in a Slidev deck is by using per-slide inline transitions. Tailoring motion for specific content creates a polished narrative that highlights important information as it enters and exits.