Modifiers Transition types

Overview

Torus Kit’s transition type means what CSS transition-timing-function is used by the effect. It changes how the transition of the effect flows during the transition duration. Torus Kit includes six different transition for different scenarios.

Syntax

There are six predefined transition types: quad, exponential, bounce, bounce-exponential, linear and ease-out. Pick one and add it into data-tor.

Examples

Hover over the blue element to see the each transition type in action.

Quad

<div data-tor="hover:scaleX.to(2) quad"></div>

Exponential

<div data-tor="hover:scaleX.to(2) exponential"></div>

Bounce

<div data-tor="hover:scaleX.to(2) bounce"></div>

Bounce exponential

<div data-tor="hover:scaleX.to(2) bounce-exponential"></div>

Linear

<div data-tor="hover:scaleX.to(2) linear"></div>

Ease out

<div data-tor="hover:scaleX.to(2) ease-out"></div>