Pro

Duration

Control how fast or slow should your animation run

Faster

Add fast, faster or fastest value in data-fx attribute to run the animation faster then default.

Duration values for faster transitions:

  • fast: {transition-duration} * .85 multiplier
  • faster: {transition-duration} * .6 multiplier
  • fastest: {transition-duration} * .45 multiplier
default
fast
faster
fastest
<div>default</div>
<div data-fx="fast">fast</div>
<div data-fx="faster">faster</div>
<div data-fx="fastest">fastest</div>

Slower

Add slow, slower or slowest value in data-fx attribute to run the animation slower then default.

Duration values for faster transitions:

  • slow: {transition-duration} * 1.25 multiplier
  • slower: {transition-duration} * 1.5 multiplier
  • slowest: {transition-duration} * 1.75 multiplier
default
slow
slower
slowest
<div>default</div>
<div data-fx="slow">slow</div>
<div data-fx="slower">slower</div>
<div data-fx="slowest">slowest</div>

Custom duration

If presented list of durations is not enough, add duration[{duration}] into data-fx, where {duration} is a time parameter in ms or s.

duration[100ms]
default
duration[2s]
<div data-fx="duration[100ms]">duration[100ms]</div>
<div>default</div>
<div data-fx="duration[2s]">duration[2s]</div>