Transitions
Every transition between slides, for the whole deck and for one slide, and a transition made with CSS.
Click the deck, then press → to see each transition. Press
← to see it play in the other direction.
Transitions
How one slide gives way to the next
1 / 7
Slide 1 of 7: Transitions
The headmatter gives the fade transition to every slide. A slide with its
own transition key uses that transition. The last slide uses turn, a
transition that the stylesheet makes.
- Transitions in the deck syntax gives the names of the transitions.
- Your own transitions tells how to make a transition with CSS.
Source
---
title: Transitions
layout: cover
defaults:
transition: fade
---
# Transitions
How one slide gives way to the next
<!-- notes
The transition of a slide plays as the slide comes in. Press the right arrow
to see each one, and the left arrow to see it play the other way.
-->
---
# Fade
The slide before fades out while this one fades in.
Every slide of this deck fades, unless it asks for something else: the
transition is in the `defaults` of the headmatter.
```md
---
defaults:
transition: fade
---
```
---
transition: slide
---
# Slide
This slide came in from the right and pushed the one before away.
```md
---
transition: slide
---
```
Go back, and it leaves the way it came.
---
transition: slide-up
---
# Slide up
The same, from the bottom.
```md
---
transition: slide-up
---
```
---
layout: statement
transition: zoom
---
# Zoom
---
transition: none
---
# None
This slide was there at once.
```md
---
transition: none
---
```
A deck without `transition` anywhere moves like this.
---
transition: turn
---
# Your own
A name that the theme doesn't know is yours. This slide asks for `turn`,
and `style.css` has its two animations:
```css
[data-slide][data-transition="turn"][data-transition-state="entering"] {
animation-name: turn-in;
}
[data-slide][data-transition="turn"][data-transition-state="leaving"] {
animation-name: turn-out;
}
```
<!-- notes
The duration and the easing are theme properties:
`--deck-transition-duration` and `--deck-transition-easing`.
-->
/* A little slower than the theme, so each transition is easy to see. */
[data-deck] {
--deck-transition-duration: 600ms;
}
/* The `turn` transition. The slide that enters and the slide that leaves
each get an animation; the theme gives them the duration and the easing. */
[data-slide][data-transition="turn"][data-transition-state="entering"] {
animation-name: turn-in;
}
[data-slide][data-transition="turn"][data-transition-state="leaving"] {
animation-name: turn-out;
}
/* `--deck-transition-direction` is 1 towards a later slide and -1 towards
an earlier one, so the slides turn the other way on the way back. */
@keyframes turn-in {
from {
opacity: 0;
rotate: calc(12deg * var(--deck-transition-direction));
scale: 0.8;
}
}
@keyframes turn-out {
to {
opacity: 0;
rotate: calc(-12deg * var(--deck-transition-direction));
scale: 0.8;
}
}
To present this deck from a clone of the repository, run this command in
the examples folder:
bun run dev transitions