Enhanced Bootstrap Duration

Effects modifiers Duration PRO

Change the speed of the effect by changing its duration

Overview

Torus kit duration will change the default effect’s speed by changing its transition-duration. This makes the effect to run faster or slower. There are couple of predefined durations, or you can create your custom one.

Please note, that different Transition types has different duration, so the changed speed could behave differently.

Syntax

There are six predefined effect durations: slowest, slower, slow for decreasing the speed and fast, faster, fastest for increasing the speed. Pick one and add it into data-fx.

Examples

Predefined

These are predefined durations. Hover over the wrapper to see them in action.

<div data-fx-trigger="hover">
  <div data-fx="hover/T:grow--x--out slowest"></div>
  <div data-fx="hover/T:grow--x--out slower"></div>
  <div data-fx="hover/T:grow--x--out slow"></div>
  <div data-fx="hover/T:grow--x--out"></div>
  <div data-fx="hover/T:grow--x--out fast"></div>
  <div data-fx="hover/T:grow--x--out faster"></div>
  <div data-fx="hover/T:grow--x--out fastest"></div>
</div>

Custom

To set custom duration, add duration[{amount}] to data-fx, where {amount} is a time in ms or s.

<div data-fx-trigger="hover">
  <div data-fx="hover/T:grow--x--out duration[100ms]"></div>
  <div data-fx="hover/T:grow--x--out duration[5s]"></div>
</div>