過渡屬性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-property:opacity transition-duration:150ms 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-property:transform transition-duration:200ms 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:transform@sm transition-property:none@print">...</div>