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
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>