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-fx.
Examples
Hover over the blue element to see the each transition type in action.
Quad
<div data-fx="hover:grow--x--out quad"></div>Exponential
<div data-fx="hover:grow--x--out exponential"></div>Bounce
<div data-fx="hover:grow--x--out bounce"></div>Bounce exponential
<div data-fx="hover:grow--x--out bounce-exponential"></div>Linear
<div data-fx="hover:grow--x--out linear"></div>Ease out
<div data-fx="hover:grow--x--out ease-out"></div>