Loops Timing functions

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-tor="loop:<variant>({timing: <value>})". Here is the list of available animation-timing-function:

NameAnimation-timing-function
quadcubic-bezier(0.23, 0, 0, 1)
exponentialcubic-bezier(.9, 0, .1, 1)
bouncecubic-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-tor="loop:blink">Blink</div>

<!-- Custom -->
<div data-tor="loop:blink({timing: quad})">Blink</div>
<div data-tor="loop:blink({timing: exponential})">Blink</div>
<div data-tor="loop:blink({timing: bounce})">Blink</div>

Circle

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

<!-- Custom -->
<div data-tor="loop:circle({timing: quad})">Circle</div>
<div data-tor="loop:circle({timing: exponential})">Circle</div>
<div data-tor="loop:circle({timing: bounce})">Circle</div>

Jump

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

<!-- Custom -->
<div data-tor="loop:jump({timing: quad})">Jump</div>
<div data-tor="loop:jump({timing: exponential})">Jump</div>
<div data-tor="loop:jump({timing: bounce})">Jump</div>

Float

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

<!-- Custom -->
<div data-tor="loop:float({timing: quad})">Float</div>
<div data-tor="loop:float({timing: exponential})">Float</div>
<div data-tor="loop:float({timing: bounce})">Float</div>

Pulse

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

<!-- Custom -->
<div data-tor="loop:pulse({timing: quad})">Pulse</div>
<div data-tor="loop:pulse({timing: exponential})">Pulse</div>
<div data-tor="loop:pulse({timing: bounce})">Pulse</div>

Radiate

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

<!-- Custom -->
<div data-tor="loop:radiate.primary({timing: quad})">Radiate</div>
<div data-tor="loop:radiate.primary({timing: exponential})">Radiate</div>
<div data-tor="loop:radiate.primary({timing: bounce})">Radiate</div>

Spin

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

<!-- Custom -->
<div data-tor="loop:spin({timing: quad})">Spin</div>
<div data-tor="loop:spin({timing: exponential})">Spin</div>
<div data-tor="loop:spin({timing: bounce})">Spin</div>

Swing

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

<!-- Custom -->
<div data-tor="loop:swing({timing: quad})">Swing</div>
<div data-tor="loop:swing({timing: exponential})">Swing</div>
<div data-tor="loop:swing({timing: bounce})">Swing</div>

Wobble

Horizontal

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

<!-- Custom -->
<div data-tor="loop:wobble.h({timing: quad})">Wobble</div>
<div data-tor="loop:wobble.h({timing: exponential})">Wobble</div>
<div data-tor="loop:wobble.h({timing: bounce})">Wobble</div>

Vertical

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

<!-- Custom -->
<div data-tor="loop:wobble.v({timing: quad})">Wobble</div>
<div data-tor="loop:wobble.v({timing: exponential})">Wobble</div>
<div data-tor="loop:wobble.v({timing: bounce})">Wobble</div>