Motion
transition-property
Setting the CSS properties to which a transition effect should be applied.
Overview
| Class | Declarations |
|---|---|
transition-property:<value>,<…> | transition-property: <value>,<…>;
|
Examples
Limit what can animate
Toggle each checkbox to move and fade the same layer. The first transition includes only opacity, so its position changes immediately; the second includes both properties.
Limit what can animate
Each control changes the same authored endpoints. Only properties in the selected list interpolate; unrelated changes remain immediate.
<!-- Opacity only · position changes immediately --><label class="block w:280px max-w:100% font-sm opacity:.72:has(input:checked)>span>span@screen transform:translateX(96px):has(input:checked)>span>span@screen"> <input type="checkbox" aria-label="Move and fade" class="mr-xs accent-color-blue outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible"> Move and fade <span aria-hidden="true" class="block h:64px mt-md p-xs outline:1px|dashed|var(--color-line-muted)"> <span id="target" class="grid place-items:center h:48px w:128px b:1px|solid|var(--color-blue-60) r-sm font-sm bg-blue-10 fg-blue-80 opacity:1 transform:none transition-property:opacity transition-timing-function:linear transition-duration:0ms@print transition-duration-slowest@screen@motion"> Layer 01 </span> </span></label><!-- Opacity + transform · both interpolate --><label class="block w:280px max-w:100% font-sm opacity:.72:has(input:checked)>span>span@screen transform:translateX(96px):has(input:checked)>span>span@screen"> <input type="checkbox" aria-label="Move and fade" class="mr-xs accent-color-blue outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible"> Move and fade <span aria-hidden="true" class="block h:64px mt-md p-xs outline:1px|dashed|var(--color-line-muted)"> <span id="target" class="grid place-items:center h:48px w:128px b:1px|solid|var(--color-blue-60) r-sm font-sm bg-blue-10 fg-blue-80 opacity:1 transform:none transition-property:opacity,transform transition-timing-function:linear transition-duration:0ms@print transition-duration-slowest@screen@motion"> Layer 01 </span> </span></label>Generated CSS
@layer utilities { .transition-property\:opacity { transition-property: opacity } .transition-property\:opacity\,transform { transition-property: opacity, transform }}The 800ms duration makes the difference visible. A property list selects which changed values interpolate; it neither creates the value change nor animates other properties.
Pair with duration and easing
Focus or hover this native button. A 200ms duration and the smooth easing token turn its explicit transform change into a transition.
Pair with duration and easing
Each control changes the same authored endpoints. Only properties in the selected list interpolate; unrelated changes remain immediate.
<!-- Transform · 200ms smooth --><div class="p-sm"> <button id="target" type="button" class="inline-grid place-items:center h:64px w:160px p-sm b:1px|solid|var(--color-blue-60) r-sm font-sm bg-blue-10 fg-blue-80 transform:none transition-property:transform transition-timing-function-smooth outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible transform:none@print transition-duration:0ms@print transition-duration-normal@screen@motion transform:translateY(-8px):is(:hover,:focus-visible)@screen"> Lift layer </button></div>The initial duration is zero. Choosing a property alone does not add time. For multiple properties, duration, delay and easing lists match by position; shorter lists repeat and extra values are unused.
Disable accidental transitions
Compare the same movement with transform selected and with none. Both specimens declare 800ms, but none prevents a transition from being created.
Disable accidental transitions
Each control changes the same authored endpoints. Only properties in the selected list interpolate; unrelated changes remain immediate.
<!-- Transform selected · interpolated movement --><label class="block w:280px max-w:100% font-sm transform:translateX(96px):has(input:checked)>span>span@screen"> <input type="checkbox" aria-label="Move layer" class="mr-xs accent-color-blue outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible"> Move layer <span aria-hidden="true" class="block h:64px mt-md p-xs outline:1px|dashed|var(--color-line-muted)"> <span id="target" class="grid place-items:center h:48px w:128px b:1px|solid|var(--color-blue-60) r-sm font-sm bg-blue-10 fg-blue-80 opacity:1 transform:none transition-property:transform transition-timing-function:linear transition-duration:0ms@print transition-duration-slowest@screen@motion"> Layer 01 </span> </span></label><!-- None selected · immediate movement --><label class="block w:280px max-w:100% font-sm transform:translateX(96px):has(input:checked)>span>span@screen"> <input type="checkbox" aria-label="Move layer" class="mr-xs accent-color-blue outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible"> Move layer <span aria-hidden="true" class="block h:64px mt-md p-xs outline:1px|dashed|var(--color-line-muted)"> <span id="target" class="grid place-items:center h:48px w:128px b:1px|solid|var(--color-blue-60) r-sm font-sm bg-blue-10 fg-blue-80 opacity:1 transform:none transition-property:none transition-timing-function:linear transition-duration:0ms@print transition-duration-slowest@screen@motion"> Layer 01 </span> </span></label>Use none to override a component or variant declaration through the cascade. Transition properties are not inherited, and disabling a transition does not disable the control or prevent the final CSS value from applying.
Apply conditionally
Toggle the layer after resizing. Below sm, only opacity interpolates; at sm, transform joins the property list. The endpoints stay the same.
Apply conditionally
Each control changes the same authored endpoints. Only properties in the selected list interpolate; unrelated changes remain immediate.
<!-- Opacity → opacity + transform at sm --><label class="block w:280px max-w:100% font-sm opacity:.72:has(input:checked)>span>span@screen transform:translateX(96px):has(input:checked)>span>span@screen"> <input type="checkbox" aria-label="Move and fade" class="mr-xs accent-color-blue outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible"> Move and fade <span aria-hidden="true" class="block h:64px mt-md p-xs outline:1px|dashed|var(--color-line-muted)"> <span id="target" class="grid place-items:center h:48px w:128px b:1px|solid|var(--color-blue-60) r-sm font-sm bg-blue-10 fg-blue-80 opacity:1 transform:none transition-property:opacity transition-timing-function:linear transition-duration-slowest@screen@motion transition-property:none@print transition-property:opacity,transform@screen@sm"> Layer 01 </span> </span></label>This is a native property-list change inside the resized viewport. Reduced motion removes the duration, and print selects none.