Transition
CSS transition properties control the transition period between two states and are commonly used to improve hover states on elements.
Basics
transition
is a CSS shorthand property and, in its simplest form, lets you set which CSS properties will be affected by the transition (transition-property
) and how long the transition should last (transition-duration
).
In the example below, Example 2 has the following CSS applied:
.box {
transition: all 1s;
}
.box:hover {
background-color: #F6F930;
height: 90px;
width: 90px;
}
The second ruleset outlines what should change when the element (in this case, a div
with the class name “box”) is hovered on. The first ruleset says that all of those changes should transition and the transition should last for one second.
If you hover over the boxes in the demo below, you can see the difference with and without CSS transitions:
Example 3 swaps out the all
keyword and replaces it with a specific CSS property: background-color
. In that example, only the background-color
value transitions; the height
and width
behaves normally, resulting in the box size jumping again.
It’s also possible to target multiple CSS properties with different transitions:
.box {
transition: background-color 3s, height 1s, width 1s;
}
This CSS would cause the box to transition in size (height
, width
) like Example 2, but the duration of the color change would be three times as long.
⏲️
You can provide transition-duration
values in seconds, as above, or milliseconds (1000ms
).
You can explore the effect of transition-duration
by clicking the Duration link in the demo above.
Timings
The transition
shorthand can also modify the style or format of the transition. In the examples above, all the transitions used the default of ease
, but other transition formats are also available, such as:
ease-in
ease-out
ease-in-out
linear
You can see examples of each of these by clicking the Timings link in the demo above.
Delay
Finally, you can also add transition-delay
to your transition
shorthand to determine when should transition start relative to the trigger (which, in all examples so far has been hovering). The default for this property is zero.
You can see examples of the effect of transition-delay
by clicking the Delay link in the demo above.
transition
shorthand
As noted initially, this shorthand, in its simplest form, combines the transition-property
and transition-duration
and looks like this:
.box {
transition: color 1s;
}
If you also want to specify the transition-timing-function
and/or transition-delay
, your CSS would look like this:
.box {
transition: color 300ms ease-in 1s;
}
Let’s break that down, bit by bit; the order of properties in the shorthand is as follows:
transition-property
– requiredtransition-duration
– requiredtransition-timing-function
– this property is optionaltransition-delay
– this property is optional
Put another way, you could get the same effect by writing this:
.box {
transition-property: color;
transition-duration: 300ms;
transition-timining-function: ease-in;
transition-delay: 1s;
}
Writing transitions
First off, use the shorthand property if it’s helpful to you or feel free to use the individual properties. Both are valid!
Also, if you are copying or using someone else’s code as a starting point for your transitions, you may run into some properties with vendor prefixes that look like this:
.box {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
This is an outdated way of writing CSS transitions and is no longer necessary in modern browsersFollowing and reading this link is optional.✳️
. You can and should delete any transition rules with browser prefixes (-webkit-
, -moz-
, -o-
) and just use the standard CSS properties.
Debugging transitions
Transitions only work if you have a state change (like hover) and have applied CSS to that state. transition: background-color 1s;
has no effect if the background-color
value does not change.
Additionally, not all CSS properties and values can be animated. MDN provides a list of animatable propertiesFollowing and reading this link is optional.✳️ which may help you out if your transitions are not working as expected.
Further resources
-
transition
shorthand propertyFollowing and reading this link is optional.✳️ -
transition-property
Following and reading this link is optional.✳️ -
transition-duration
Following and reading this link is optional.✳️ -
transition-timining-function
Following and reading this link is optional.✳️ -
transition-delay
Following and reading this link is optional.✳️