Now that we have a basic structure defined and have learned how to create a fluid animation that moves through the slides placed in a 3D scene, the next step, obviously, is to enrich each of these slides with images, videos, graphs, and everything we might need to fulfill our purposes.
To do so, we can use the knowledge already accumulated during the previous chapters of this book; for example, we can easily define a fade-in animation for the first slide, as follows:
div[data-sequence="1"]{ @include animation(sequence_1 2s linear); @include animation-fill-mode(forwards); } /* == [BEGIN] sequence_1 == */ @include ext_keyframes(sequence_1){ 0%{ color: rgba(0,0,0,0); } } /* == [END] sequence_1 == */
We can also add custom fonts to our slides:
div[data-sequence="2"]{ font-family: 'Meie Script', cursive; }
Here's the result: