Transition property

Syntax

Class
Properties
transition-prop-{...properties}
transition-property: {properties...};
transition-prop-colors
transition-property: color, background-color, border-color, fill, stroke;
transition-prop-all
transition-property: all;
transition-prop-none
transition-property: none;

Parameters

...properties
color

color

...properties
bg-c

background-color

...properties
bc

border-color

...properties
fill

fill

...properties
stroke

stroke

...properties
opacity

opacity

...properties
shadow

box-shadow

...properties
transform

transform

...properties
width

width

...properties
height

height

...properties
top

top

...properties
right

right

...properties
bottom

bottom

...properties
left

left

...properties
colors

background-color, border-color, color, fill, stroke

<div class="t1 px-16 py-4 my-32 shadow-4 color-white bg-c-blue cursor-pointer select-none b-4-transparent duration-1000 ease-in-out transition-prop-colors hover:/bg-c-blue-900 hover:/color-yellow hover:/b-c-yellow">Button</div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
transition-prop-color
t1 transition-prop-color
.t1.transition-prop-color { transition-property: color; }
transition-prop-bgColor
t1 transition-prop-bgColor
.t1.transition-prop-bgColor { transition-property: background-color; }
transition-prop-borderColor
t1 transition-prop-borderColor
.t1.transition-prop-borderColor { transition-property: border-color; }
transition-prop-fill
t1 transition-prop-fill
.t1.transition-prop-fill { transition-property: fill; }
transition-prop-stroke
t1 transition-prop-stroke
.t1.transition-prop-stroke { transition-property: stroke; }
transition-prop-opacity
t1 transition-prop-opacity
.t1.transition-prop-opacity { transition-property: opacity; }
transition-prop-shadow
t1 transition-prop-shadow
.t1.transition-prop-shadow { transition-property: box-shadow; }
transition-prop-transform
t1 transition-prop-transform
.t1.transition-prop-transform { transition-property: transform; }
transition-prop-width
t1 transition-prop-width
.t1.transition-prop-width { transition-property: width; }
transition-prop-height
t1 transition-prop-height
.t1.transition-prop-height { transition-property: height; }
transition-prop-top
t1 transition-prop-top
.t1.transition-prop-top { transition-property: top; }
transition-prop-right
t1 transition-prop-right
.t1.transition-prop-right { transition-property: right; }
transition-prop-bottom
t1 transition-prop-bottom
.t1.transition-prop-bottom { transition-property: bottom; }
transition-prop-left
t1 transition-prop-left
.t1.transition-prop-left { transition-property: left; }
transition-prop-none
t1 transition-prop-none
.t1.transition-prop-none { transition-property: none; }
transition-prop-all
t1 transition-prop-all
.t1.transition-prop-all { transition-property: all; }
transition-prop-colors
t1 transition-prop-colors
.t1.transition-prop-colors { transition-property: color, background-color, border-color, fill, stroke; }
Multiple properties listed.
t1 transition-prop-color-bgColor-borderColor-width-height
.t1.transition-prop-color-bgColor-borderColor-width-height { transition-property: color, background-color, border-color, width, height; }