Fragments
There are several, familiar options which control the animation effect through class and order data-fragment-index that they are displayed:
|
1 2 3 4 5 6 7 8 9 |
<section> <p class="fragment grow" data-fragment-index="1">grow</p> <p class="fragment shrink" data-fragment-index="2">shrink</p> <p class="fragment roll-in" data-fragment-index="3">roll-in</p> <p class="fragment fade-out" data-fragment-index"4">fade-out</p> <p class="fragment highlight-red" data-fragment-index="5">highlight-red</p> <p class="fragment highlight-green" data-fragment-index="6">highlight-green</p> <p class="fragment highlight-blue" data-fragment=index="7">highlight-blue</p> </section> |
You can have many fragments showing at the same time by wrapping them correctly. Here is an example of fading in and out a fragment.
|
1 2 3 4 5 |
<section> <span class="fragment fade-in"> <span class="fragment fade-out">I'll fade in, then out</span> </span> </section> |
