Transitions are mainly used to provide additional context for the hover states of interactive elements like buttons, links, and inputs.
Transitions trigger on hover. There are 2 pre-defined transition effects:
There are 5 different, t-shirt sized transition durations.
.tr-duration-0 to reset duration to zero.
.tr-duration can also be used as shorthand for
Easing defines the curve on which the transition takes place. Each of the 5 easing options provide a different feel to the transition.