Loop animations

Looping an animation causes it to repeat. You can loop animations in Advanced mode . Each element's animation can be looped separately, or you can loop a more complex animation involving multiple elements.

Loop the animation for a single element

Looped keyframes show as translucent copies on the timeline. In the example below, the red-div element has a 0.5-second-long animation that loops to play 4 times in total.

Loop the animation for multiple elements

You can add an event to loop all animation on the page, starting and ending at the times you specify.

1. Set a timeline label where you want the animation loop to start:
   1. Right-click the Eventstrack (the first row of the timeline) where you want the animation to start looping, and select Add label...from the pop-up menu.
   2. Enter a label name such as loopStart in the pop-up dialog.
   3. Press Enter.
2. Right-click the Eventstrack where you want the animation loop to end, and select Add eventfrom the pop-up menu.
   
3. Double-click the event markerto configure the event:
   1. For the Action, choose:
      • Timeline> gotoAndPlay for infinite looping.
      • Timeline> gotoAndPlayNTimes for a specific number of loops.
   2. For the Receiver, choose the page.
   3. For the Configuration, select the label you created earlier (for example, loopStart ) and set the number of times you want to repeat.

Use the Previewbutton to see how your looped animation behaves in a browser.