Enhanced Bootstrap Combination

Loop animations Combination PRO

Combine multiple loops to create desired effect

Overview

Because the every loop uses its own CSS @keyframe animation, they cannot be combined in the one data-loop. Instead of that, you can nest each data-loop element inside another.

Examples

Combination of jump with a blink loop.

Example
<div data-loop="jump">
  <div data-loop="blink">Example</div>
</div>

Combination of wobble-h with a swing loop, that has a slow loop-speed modifier.

Example
<div data-loop="wobble-h slowest">
  <div data-loop="swing slow">Example</div>
</div>

Nesting of three loops to create a pulsating effect.

Example
<div data-loop="swing">
  <div data-loop="pulse">
    <div data-loop="radiate radiate-primary">Example</div>
  </div>
</div>