Transitions

Transitions are mainly used to provide additional context for the hover states of interactive elements like buttons, links, and inputs.


Basic Usage

Transitions trigger on hover. There are 2 pre-defined transition effects: .scale-up-hover and .scale-down-hover.

<!-- Transition: scale up -->
<a class="scale-up-hover">Click here</a>

<!-- Transition: scale down -->
<a class="scale-down-hover">Click here</a>

Duration

There are 6 different, transition durations. (1-5) .tr-duration-1. Use .tr-duration-0 to reset duration to zero. .tr-duration can also be used as shorthand for .tr-duration-m.

<!-- No transition duration -->
<a class="Button scale-up-hover tr-duration-0">Click Here</a>

<!-- Transition duration: 1 -->
<a class="Button scale-up-hover tr-duration-1">Click Here</a>

<!-- Transition duration: 2 -->
<a class="Button scale-up-hover tr-duration-2">Click Here</a>

<!-- Transition duration: 3 -->
<a class="Button scale-up-hover tr-duration-3">Click Here</a>

<!-- Transition duration: 4 -->
<a class="Button scale-up-hover tr-duration-4">Click Here</a>

<!-- Transition duration: 5 -->
<a class="Button scale-up-hover tr-duration-5">Click Here</a>

Easing

Easing defines the curve on which the transition takes place. Each of the 5 easing options provide a different feel to the transition.

<!-- Transition easing: linear -->
<a class="Button scale-up-hover tr-easing-linear">Click Here</a>

<!-- Transition easing: ease -->
<a class="Button scale-up-hover tr-easing-ease">Click Here</a>

<!-- Transition easing: cubic bezier scale-up -->
<a class="Button scale-up-hover tr-easing-cb-scale-up">Click Here</a>

<!-- Transition easing: cubic bezier scale-in -->
<a class="Button scale-up-hover tr-easing-cb-scale-in">Click Here</a>

<!-- Transition easing: cubic bezier scale-out -->
<a class="Button scale-up-hover tr-easing-cb-scale-out">Click Here</a>