Enhanced Bootstrap Transition types

Effects modifiers Transition types PRO

Change how the transition of the effect flows

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>