Lesson Design

Using Animations

You can utilize these reusable animation classes to introduce or draw focus to elements on a screen.

Animation classes

When using one of the new viewer templates, animations can be added to elements with the class animated followed by the specific animation class, such as animated bounceIn. By default animations will play once, but they can be set to loop infinitely by adding the class infinite. Preview the available animations below and copy the class to use them in the author.

Animate me!
Do it, you know you want to

Delays and durations

To adjust the timing of animations, you can add additional classes. All animations play instantly and have a 1 second duration by default, but this can be overridden with duration class such as duration-2, which would make it 2 seconds long. Delays follow the same pattern, for example adding delay-1 will delay an animation by 1 second.

Time Duration Class Delay Class
1 Second duration-1 delay-1
2 Seconds duration-2 delay-2
3 Seconds duration-3 delay-3
4 Seconds duration-4 delay-4
5 Seconds duration-5 delay-5
6 Seconds duration-6 delay-6