Pro

Timing function

Control how an animation run over time

Overview

This utility controls the speed of animation over time that is running. The default value is cubic-bezier(.65,.05,.36,1) and it’s automatically set when you use data-fx. There is also quad, exponential and bounce variant available.

Timing values for transitions:

  • default - cubic-bezier(.65,.05,.36,1) 300ms
  • quad - cubic-bezier(.25,.4,0,1) 400ms
  • exponential - cubic-bezier(.9,0,.1,1) 600ms
  • bounce - cubic-bezier(.4,0,0,1.4) 500ms

Example

Hover over this example to see the timing function in action.

Default
Quad
Exponential
Bounce
<div>Default</div>
<div data-fx="quad">Quad</div>
<div data-fx="exponential">Exponential</div>
<div data-fx="bounce">Bounce</div>