Marp transitions and animations: fade, slide, fragments

By Ekrem Çetinkaya · Published 13 September 2026

Marp slide transitions are one line in the front matter, transition: fade, and work in the HTML that marp-cli exports; <!-- _transition: slide --> changes the transition into one slide, and * item bullets become fragments that appear one by one. Transitions need a browser with the View Transitions API (Chrome, Edge, recent Safari and Firefox) and do not exist in PDF or PPTX, which are static.

This guide covers the directive, the built-in transition names, timing, per-slide overrides, fragments, custom transitions in CSS, and what to expect in each export. Everything was checked against marp-cli 4.5 in September 2026.

Turn transitions on

---
marp: true
transition: fade
---

Export with marp-cli (marp deck.md) and open the HTML: every slide change now fades. The directive is a local directive, so a value in the front matter applies to the whole deck, and a comment on a slide changes it from that slide on; the underscore form changes one slide:

<!-- _transition: slide -->

A transition belongs to the boundary into the next slide, so setting it on the last slide does nothing.

The built-in transitions

none, clockwise, counterclockwise, cover, coverflow, cube, cylinder, diamond, drop, explode, fade, fade-out, fall, flip, glow, implode, in-out, iris-in, iris-out, melt, overlap, pivot, pull, push, reveal, rotate, slide, star, swap, swipe, swoosh, wipe, wiper, zoom.

For a lecture, fade between content slides and slide or push into a section divider is as much motion as a room can take for an hour. The rest are for a five-minute talk, once.

Timing

Append a duration: transition: fade 1s or transition: fade 300ms. The default is 0.5 s. Anything above a second slows the deck down noticeably over forty slides.

Fragments: bullets that appear one at a time

In the HTML export, a list written with * is a fragmented list: each bullet appears on a key press. Lists written with - appear whole.

* First, this
* then this
* and only then this

Fragments are the one animation worth using in teaching, because they let you ask the room before revealing the answer. In PDF and PPTX every fragment is visible at once (the exports are static), so a slide that relies on the reveal needs its answer on the next slide instead.

Custom transitions

A transition is a pair of CSS keyframe animations named with a Marp prefix; define them in the theme or a style: block and use the name as a directive:

@keyframes marp-transition-dissolve { from { opacity: 1; } to { opacity: 0; } }

marp-transition-NAME runs on the outgoing slide and is reversed for the incoming one. For different in and out animations use marp-outgoing-transition-NAME and marp-incoming-transition-NAME; marp-transition-backward-NAME runs when navigating back. Then transition: dissolve. The CSS variable --marp-transition-duration on the from keyframe sets a default length.

Elements with the same view-transition-name on consecutive slides morph between positions, which is how a diagram can move rather than blink.

Where transitions do and do not work

The OS "reduce motion" setting turns every transition into a plain fade. marp deck.md --bespoke.transition=false disables them in the export.

Advice for lectures

Motion is attention, and attention is the scarce thing in a lecture. Use one transition, use fragments where a reveal teaches something, and stop there. A deck that must also be a PDF should not depend on either.

FAQ

How do I add transitions in Marp?

transition: fade in the front matter, then export to HTML with marp-cli. Use <!-- _transition: name --> on a slide to change one transition.

Why do my Marp transitions not work?

They only run in the marp-cli HTML export, in a browser with the View Transitions API (Chrome 111+, Edge, Safari 18.2+, Firefox 144+). The VS Code preview, PDFs and PPTX files do not animate. Reduced-motion settings replace them with a fade.

How do I make bullets appear one by one in Marp?

Write the list with * instead of -. In the HTML export each bullet is a fragment revealed on a key press.

Do transitions export to PDF or PowerPoint?

No. Both formats are static; fragments are shown all at once and transitions are dropped.