Steps are used to highlight or incrementally reveal individual elements on a slide.
This is what reveal.js calls fragments. Every element with the role fragment will be stepped through before moving on to the next slide.

While you can use the role fragment on any elements, we recommend to use the step option to declare a fragment (see below).
It will ensure better portability and avoid CSS conflicts when using another converter.

Step option

Let’s assume you have an unordered list on one of your slides and you want to reveal the items one-by-one. Declare the step option on the list as follows:

== Topic

* this
* is
* revealed
* gradually
At the moment, only fade-in style is supported for lists.

Step style

The default step style is to start out invisible and fade in. This style can be changed by using a different role on the block or inline element.

== Topic




Here’s the complete list of the built-in styles:

Name Effect


Start visible, fade out


Slide up while fading in


Slide down while fading in


Slide left while fading in


Slide right while fading in


Fades in, then out on the next step


Fades in, then to 50% on the next step


Scale up


Scale down


Strike through


Turn text red


Turn text green


Turn text blue


Turn text red, then back to original on next step


Turn text green, then back to original on next step


Turn text blue, then back to original on next step

Step order

By default fragments will be stepped through in the order that they appear in the document. This display order can be changed using the step attribute.

== Topic

Finally, a pro tip...

First, watch out for...

Second, don't forget...
Multiple elements can appear at the same index.

Text and inline elements

Since it’s not possible to define attributes or options on text and inline elements, you can use the role step.

The [.step.highlight-red]#greatest glory in living# lies not in never falling, but in [.step.highlight-red]#rising every time we fall#.

In the above example, we will highlight in red "greatest glory in living" and then "rising every time we fall".

Limitations and workarounds

Description lists

Currently, the %step option and the step attribute are not supported on description lists. The following will not work:

== Topic

Hard drive:: Permanent storage for operating system and/or user files.
RAM:: Temporarily stores information the CPU uses during operation.

Show list items all at once

If you want to reveal list items all at once (i.e., you don’t want to reveal the list items one-by-one), you can wrap a list block in an open block:

== Topic

.Greek Alphabet
* α
* β
* γ

In the above example, the title "Greek Alphabet" and all the list items will be revealed at once.

And here’s a another example where we apply the step option on different elements:

== Topic

* a
* b
* c

* d
* e
* f

Here’s what will happen step by step:

  1. the title "First" and all the list items will be revealed at once

  2. The title "Second" will be revealed

  3. The list items on the "Second" list will be revealed one-by-one

steps lists