Let’s play around with transitions!
The CSS property transition
allows you to define a smooth transition when CSS values change. Instead of CSS values changing instantly, they are applied over a period of time. transition
is made up of 4 other sub properties: transition-property
, transition-duration
, transition-timing-function
and transition-delay
. We will walk through all 4 of these sub properties before we combine them with transition
.
Playground
The widget below just changes the width
, height
and background-color
when an item is hovered over by a mouse. They can be customized to play with the playground however you like.
Hovering over an item will cause the width, height and background-color of the item to change. This will trigger a transition in our case.
Item Hover
.item:hover {
width: 15em;
height: 15em;
background-color: #D27979;
}
Transition Property
The CSS property transition-property
lets you choose which CSS properties can be transitioned. Here is a link to a large list of all the CSS properties that can be used. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties.
In our case here, we can selectively allow width
, height
and background-color
to transition. For example, a value of width, height
allows transitions forwidth
and height
but not for the background-color
.
A value of all
allows every possible CSS property to be transitioned.
Transition Property
.item {
transition-property: width, height, background-color;
}
Transition Duration
The CSS property transition-duration
specifies how long a transition takes to complete. A shorter duration means a faster transition.
Transition Duration
.item {
transition-duration: 1s;
}
The transition-duration
can be specified in seconds or milliseconds .
Transition Duration
.item {
transition-duration: 1000ms;
}
Transition Timing
The CSS property transition-timing-function
allows you modify the timing of the transition. This can change the whole appearance of the transition. The default value is ease
which is a transition that starts fast but slows down at the end.
Transition Timing
.item {
transition-timing-function: ease;
}
The steps()
function can be used which indicate how many frames the entire transition will have.
Transition Timing
.item {
transition-timing-function: steps(10, end);
}
Transition Delay
Simply put, transition-delay
delays the transition. For example, having a transition-delay
of 2s
means that the transition waits for 2 seconds before beginning to run.
Providing a negative value has a different effect. To quote the MDN article on transition-delay:
For example, a transition-delay
of -0.5s
means that the element starts 0.5 seconds ahead of time.
Transition Delay
.item {
transition-delay: 0.5s;
}
Like transition-duration
, transition-delay
can be specified in seconds or milliseconds .
Transition Delay
.item {
transition-delay: 500ms;
}
All Together
Now that we’ve talked about all of the possible transition sub-properties, let’s bring them all together with the CSS property transition
. When using transition, we need to supply transition-property
, transition-duration
, transition-timing-function
and transition-delay
values in that order. Thats the same order that I covered them in this playground.
Transition
.item {
transition: all 1s ease 0s;
}
You can declare multiple transitions by comma separating values. At the minimum, you need to declare the transition-property
and transition-duration
to create a valid transition. In our case below, we can individually declare transitions and the animation duration for every one.
Transition
.item {
transition: width 1s, height 1s, background-color 1s;
}
Conclusion
That’s it for CSS transitions! This is a fairly simple example with the use of the :hover
pseudo class but transitions become much better with more interactivity. When you have JavaScript adding styles and classes dynamically, there are much more use cases for CSS transitions. Thanks for reading!