Transition

Syntax

Class
Properties
transition
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-{...properties}
transition-property: {properties...};
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-all
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-none
transition-property: none;

Parameters

...properties
color

color

...properties
bgColor

background-color

...properties
borderColor

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 shadow-4 color-white bg-c-blue cursor-pointer select-none transition hover:/bg-c-blue-800">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
t1 transition
.t1.transition { transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
transition-none
t1 transition-none
.t1.transition-none { transition-property: none; }
transition-color
t1 transition-color
.t1.transition-color { transition-property: color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
transition-bgColor
t1 transition-bgColor
.t1.transition-bgColor { transition-property: background-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
transition-borderColor
t1 transition-borderColor
.t1.transition-borderColor { transition-property: border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
transition-fill
t1 transition-fill
.t1.transition-fill { transition-property: fill; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
transition-stroke
t1 transition-stroke
.t1.transition-stroke { transition-property: stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
transition-opacity
t1 transition-opacity
.t1.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
transition-shadow
t1 transition-shadow
.t1.transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
transition-transform
t1 transition-transform
.t1.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
transition-width
t1 transition-width
.t1.transition-width { transition-property: width; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
transition-height
t1 transition-height
.t1.transition-height { transition-property: height; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
transition-top
t1 transition-top
.t1.transition-top { transition-property: top; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
transition-right
t1 transition-right
.t1.transition-right { transition-property: right; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
transition-bottom
t1 transition-bottom
.t1.transition-bottom { transition-property: bottom; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
transition-left
t1 transition-left
.t1.transition-left { transition-property: left; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
transition-all
t1 transition-all
.t1.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
transition-colors
t1 transition-colors
.t1.transition-colors { transition-property: color, background-color, border-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
Multiple properties listed.
t1 transition-color-bgColor-borderColor-width-height
.t1.transition-color-bgColor-borderColor-width-height { transition-property: color, background-color, border-color, width, height; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
Definition order.
t1 transition-color transition-prop-color duration-100 ease-linear
.t1.transition-color { transition-property: color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .t1.transition-prop-color { transition-property: color; } .t1.duration-100 { transition-duration: 100ms; } .t1.ease-linear { transition-timing-function: linear; }