Transitions

Transition Duration

Utilities for sets the length of time for a transition animations to complete.

Class

Usage

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

Set transition duration 75ms to an element.

<!-- Example -->
<y class="transition duration-75 ease-in-out ... (hover)shadow-lg ... w-32 h-24">
  ...
</y>

Set transition duration 100ms.

<!-- Example -->
<y class="transition duration-100 ease-in-out ... (hover)shadow-lg ... w-32 h-24">
  ...
</y>

Set transition duration 150ms.

<!-- Example -->
<y class="transition duration-150 ease-in-out ... (hover)shadow-lg ... w-32 h-24">
  ...
</y>

Set transition duration 200ms.

<!-- Example -->
<y class="transition duration-200 ease-in-out ... (hover)shadow-lg ... w-32 h-24">
  ...
</y>

Set transition duration 300ms.

<!-- Example -->
<y class="transition duration-300 ease-in-out ... (hover)shadow-lg ... w-32 h-24">
  ...
</y>

Set transition duration 500ms.

<!-- Example -->
<y class="transition duration-500 ease-in-out ... (hover)shadow-lg ... w-32 h-24">
  ...
</y>

Set transition duration 1000ms.

<!-- Example -->
<y class="transition duration-1000 ease-in-out ... (hover)shadow-lg ... w-32 h-24">
  ...
</y>

Customize More

// @file: `src/_plugins.scss`
@include plugin(
  (
    utility: 'duration',
    //variant: 'responsive',
    property: 'transition-duration',
    modifier: (
      '600': '...ms',
      '800': '...ms'
      ...
    )
  )
)

Variant