Transitions

Transition Property

Utilities for sets the css properties affected by transition animations.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
transition	transition-property: all
transition-none	transition-property: none
transition-colors	transition-property: background-color, border-color, color, fill, stroke
transition-opacity	transition-property: opacity
transition-shadow	transition-property: box-shadow
transition-transform	transition-property: transform

Usage

Set basic transition with Duration and Timing, apply with pseudo class variants hover, focus, active.

An example of transitioning an element with Border Width and Box Shadow utilities.

Hover

<div class="transition duration-300 ease-in-out border-4 border-tint-granite-2 (hover)border-tint-granite-4 (hover)shadow-lg ... width-32 height-24">
  ...
</div>

HTML

.dummy {
  @extend
    .transition,
    .duration-300,
    .ease-in-out,
    .border-4,
    .border-tint-granite-2,
    .(hover)border-tint-granite-4,
    .(hover)shadow-lg,
    .width-32,
    .height-24;
}

SCSS