Bootstrap Transitions

Quickly add smooth transform transitions. Choose from default, quad, exponential or bounce one.

Overview

Using Torus Kit .tr-* transition class, you can not only add smooth transition to elements that hasn’t one, but you can also change the style of already existing transition. Choose from default, quad, exponential or bounce transition style.

Examples

This shows default and .tr-exponential transition on .collapse animation.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred.

Transition types

Choose from several transition types: .tr for default transition or .tr-{quad|exponential|bounce|linear|none}. Each one has its own duration.

Default

The default .tr transition has standard ease-in-out timing function with 200ms duration.

Hover me
<div class="tr">Hover me</div>

Quad

The .tr-quad transition has cubic-bezier(.25,.4,0,1) timing function with 400ms duration.

Hover me
<div class="tr-quad">Hover me</div>

Exponential

The .tr-exponential transition has cubic-bezier(.9,0,.1,1) timing function with 600ms duration.

Hover me
<div class="tr-exponential">Hover me</div>

Bounce

The .tr-bounce transition has cubic-bezier(.4,0,0,1.4) timing function with 500ms duration.

Hover me
<div class="tr-bounce">Hover me</div>

Transition duration

To change the transition duration use .tr-{fast|faster|fastest} class for faster and .tr-{slow|slower|slowest} class for slower transition duration.

Values for faster transitions:

  • .tr-fast: {transition-duration} * .85 multiplier
  • .tr-faster: {transition-duration} * .6 multiplier
  • .tr-fastest: {transition-duration} * .45 multiplier

Values for slower transitions:

  • .tr-slow: {transition-duration} * 1.25 multiplier
  • .tr-slower: {transition-duration} * 1.5 multiplier
  • .tr-slowest: {transition-duration} * 1.75 multiplier

Faster

Use .tr-{fast|faster|fastest} class.

default

.tr-fast

.tr-faster

.tr-fastest
<div class="tr-quad">default</div>
<div class="tr-quad tr-fast">.tr-fast</div>
<div class="tr-quad tr-faster">.tr-faster</div>
<div class="tr-quad tr-fastest">.tr-fastest</div>

Slower

Use .tr-{slow|slower|slowest} class.

default

.tr-slow

.tr-slower

.tr-slowest
<div class="tr-quad">default</div>
<div class="tr-quad tr-slow">.tr-slow</div>
<div class="tr-quad tr-slower">.tr-slower</div>
<div class="tr-quad tr-slowest">.tr-slowest</div>