Enhanced Bootstrap Animation types

Loop animations Animation types PRO

Change the default animation timing function to any of three predefined types

Overview

Every loop has their own default animation-timing-function which suits its best, but you can change it to the one of the three built-in types.

Syntax

Use data-loop="{effect} {animation-timing-type}". Here is the list with the animation-timing-function available:

Name Animation-timing-function
quad cubic-bezier(0.23, 0, 0, 1)
exponential cubic-bezier(.9, 0, .1, 1)
bounce cubic-bezier(.9, 0, .1, 1)

Examples

Built-in animation types with the default examples along with the modified ones.

Blink
Blink
Blink
Blink

<!-- Default -->
<div data-loop="blink">Blink</div>

<div data-loop="blink quad">Blink</div>
<div data-loop="blink exponential">Blink</div>
<div data-loop="blink bounce">Blink</div>

Circle

Circle
Circle
Circle
Circle

<!-- Default -->
<div data-loop="circle">Circle</div>

<div data-loop="circle quad">Circle</div>
<div data-loop="circle exponential">Circle</div>
<div data-loop="circle bounce">Circle</div>

Jump

Jump
Jump
Jump
Jump

<!-- Default -->
<div data-loop="jump">Jump</div>

<div data-loop="jump quad">Jump</div>
<div data-loop="jump exponential">Jump</div>
<div data-loop="jump bounce">Jump</div>

Float

Float
Float
Float
Float

<!-- Default -->
<div data-loop="float">Float</div>

<div data-loop="float quad">Float</div>
<div data-loop="float exponential">Float</div>
<div data-loop="float bounce">Float</div>

Pulse

Pulse
Pulse
Pulse
Pulse

<!-- Default -->
<div data-loop="pulse">Pulse</div>

<div data-loop="pulse quad">Pulse</div>
<div data-loop="pulse exponential">Pulse</div>
<div data-loop="pulse bounce">Pulse</div>

Radiate

Radiate
Radiate
Radiate
Radiate

<!-- Default -->
<div data-loop="radiate radiate-primary">Radiate</div>

<div data-loop="radiate radiate-primary quad">Radiate</div>
<div data-loop="radiate radiate-primary exponential">Radiate</div>
<div data-loop="radiate radiate-primary bounce">Radiate</div>

Spin

Spin
Spin
Spin
Spin

<!-- Default -->
<div data-loop="spin">Spin</div>

<div data-loop="spin quad">Spin</div>
<div data-loop="spin exponential">Spin</div>
<div data-loop="spin bounce">Spin</div>

Swing

Swing
Swing
Swing
Swing

<!-- Default -->
<div data-loop="swing">Swing</div>

<div data-loop="swing quad">Swing</div>
<div data-loop="swing exponential">Swing</div>
<div data-loop="swing bounce">Swing</div>

Wobble

Horizontal

Wobble
Wobble
Wobble
Wobble

<!-- Default -->
<div data-loop="wobble-h">Wobble</div>

<div data-loop="wobble quad">Wobble</div>
<div data-loop="wobble-h exponential">Wobble</div>
<div data-loop="wobble-h bounce">Wobble</div>

Vertical

Wobble
Wobble
Wobble
Wobble

<!-- Default -->
<div data-loop="wobble-v">Wobble</div>

<div data-loop="wobble-v quad">Wobble</div>
<div data-loop="wobble-v exponential">Wobble</div>
<div data-loop="wobble-v bounce">Wobble</div>