Transitions
Syntax
The
transition
property is a combination of
transition-property,
transition-duration,
transition-delay, and
transition-timing-function
properties. Together, they define how a property should interpolate
between their initial state and the final state.
.transition {
color: black;
transform: scale(1);
transition-property: color, transform;
transition-duration: 1s;
transition-timing-function: ease-in-out;
transition-delay: .100ms;
/* All combined */
transition: color 1s ease-in-out .100ms,
transform 1s ease-in-out .100ms;
}
.transition:hover {
color: deeppink;
transform: scale(1.25);
}Transition
You can define different transitions for different states of an element. For example, you can define a transition for when an element recieves hover, and another for when it looses it.
.transition {
color: black;
transform: scale(1);
transition-property: color, transform;
transition-duration: 300ms;
transition-timing-function: ease-out;
transition-delay: 1s;
}
.transition:hover {
color: deeppink;
transform: scale(1.25);
transition-delay: 0s;
}Transition
Transition properties
Transition property
The
transition-property
property defines which properties will be transitioned. It accepts a
list of comma-separated property names. Although it will hinder
overall performance, you can use the
all
value to transition all properties.
Transition duration and delay
Both properties accept a unit value in seconds or milliseconds,
respectively anotated with
s
or
ms.
Transition timing function
Just like the
transition-timing-function
property, the
transition-timing-function
property accepts both a list of predifined functions and a custom
cubic-bezier function.
.transition {transition: color 1s ease-in-out, transform 1s ease-in-out;}
.transition:hover {
color: deeppink;
transform: scale(1.25);
}
/* Equal to cubic-bezier(0, 0, 1, 1) */
.linear {transition-timing-function: linear;}
/* Equal to cubic-bezier(0.25, 0.1, 0.25, 1) */
.ease {transition-timing-function: ease;}
/* Equal to cubic-bezier(0.42, 0, 1, 1) */
.ease-in {transition-timing-function: ease-in;}
/* Equal to cubic-bezier(0, 0, 0.58, 1) */
.ease-out {transition-timing-function: ease-out;}
/* Equal to cubic-bezier(0.42, 0, 0.58, 1) */
.ease-in-out {transition-timing-function: ease-in-out;}
.cubic-bezier {transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);}
.linear-func {
transition-timing-function: linear(
0,
0.01 0.7%,
0.046 1.5%,
0.192 3.2%,
0.391 4.8%,
0.954 8.8%,
1.201 11%,
1.347 13%,
1.388 14%,
1.41 15.1%,
1.411 15.9%,
1.4 16.8%,
1.342 18.6%,
1.256 20.3%,
1.013 24.5%,
0.913 26.7%,
0.857 28.6%,
0.831 30.6%,
0.833 32.1%,
0.851 33.7%,
1.024 41.6%,
1.055 43.8%,
1.069 46%,
1.061 49.3%,
0.991 57.1%,
0.972 61.4%,
0.974 64.8%,
1.011 76.7%,
0.996 91.2%,
1);
}
/* Transition the element 4 times
including the first position but excluding the last */
.step {transition-timing-function: steps(4);}
/* Transition the element 4 times
excluding the first position and including the last */
.step-start {transition-timing-function: steps(4, jump-start);}
/* Transition the element 4 times
including the first position and excluding the last */
.step-end {transition-timing-function: steps(4, jump-end);}
/* Transition the element 4 times
excluding the first and last position */
.step-both {transition-timing-function: steps(4, jump-both);}
/* Transition the element 4 times
including the first and last position */
.step-none {transition-timing-function: steps(4, jump-none);}