Press/to search

Transitions

Transition Timing

Utilities for sets the easing function of transition animations.


Class

classcss
ease-lineartransition-timing-function: linear
ease-intransition-timing-function: cubic-bezier(0.4, 0, 1, 1)
ease-outtransition-timing-function: cubic-bezier(0, 0, 0.2, 1)
ease-in-outtransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)

Usage

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

Set transition timing ease-linear to an element.

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

Set transition timing ease-in.

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

Set transition timing ease-out.

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

Set transition timing ease-in-out.

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

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.