transition-property

Setting the CSS properties to which a transition effect should be applied.

Overview

Examples

Limit what can animate

Use transition-property:* to choose the properties that are allowed to animate. Prefer a small property list for predictable state changes.

<div class="opacity:.6 transition-duration:150ms transition-property:opacity opacity:1:hover">  Online</div>

@layer utilities {  .transition-property\:opacity {    transition-property: opacity  }}

Pair with duration and easing

transition-property:* only chooses the property. Add transition-duration:* and transition-timing-function:* when the transition needs a specific feel.

<button class="transition-duration:200ms transition-property:transform transition-timing-function:ease-out transform:translateY(-1px):hover">  Lift</button>

Disable accidental transitions

Use transition-property:none to stop inherited component styles or variant styles from animating a state.

<div class="transition-property:none@print">  Static in print</div>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="transition-property:opacity:hover transition-property:none@print transition-property:transform@sm">...</div>