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;
}