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);}
/* 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);}