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 5 different, t-shirt sized transition durations. .tr-duration-xs, .tr-duration-s, .tr-duration-m, .tr-duration-l, and .tr-duration-xl.

Use .tr-duration-0 to reset duration to zero.

.tr-duration can also be used as shorthand for .tr-duration-m.

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

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

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

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

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

  <!-- No transition duration -->
  <a class="Button scale-up-hover tr-duration-0">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>