In this tutorial, we’re taking a look at how to animate components using CSS transitions!
A transition occurs when we tell a CSS property value to change, over a specified period of time.
We do this with the transition
property, which is a shorthand of the following properties:
transition-property
transition-duration
transition-timing-function
-
transition-delay
.element {
transition-property: property;
transition-duration: duration;
transition-timing-function: timing-function;
transition-delay: delay;
}
This is equivalent to:
.element {
transition: property duration timing-function delay;
}
Transition Properties
transition-property
is the property you wish to transition.
transition-duration
is the duration of the transition. The value is specified in seconds (eg. 5s
for 5 seconds).
transition-timing-function
is how the transition occurs. We’ll look at this later.
transition-delay
is how long you want to wait before starting the duration. Again, the value is specified in seconds (eg. 5s
for 5 seconds).
Activating transitions
You can activate a CSS transition with a pseudo-class like :hover
(when a mouse hovers over the element), :focus
(when a user tabs onto or clicks an input element), or :active
(when user clicks the element).
Let’s see an example:
.button {
background-color: green;
transition: background-color 2s ease-out;
}
.button:hover {
background-color: gold;
}
What is the transition-timing-function?
The transition-timing-function
dictates how a transition occurs. All transitions are set to linear
by default, meaning the property changes evenly throughout the transition.
For example:
.element {
transition-property: transform;
transition-duration: 1s;
transition-timing-function: linear;
}
Which is the same as:
.element {
transition: transform 1s linear;
}
There are a number of values we can use for our transition-timing-function
:
-
ease
- the transition has a slow start, fast middle, then slow end -
linear
- the transition has a consistent speed from start to end -
ease-in
- the transition will have a slow start -
ease-out
- the transition will have a slow end -
ease-in-out
- the transition has a slow start and end -
cubic-bezier(n,n,n,n)
- a customizable transition values that we specify ourselves. It’s handy to use generator tools such as https://cubic-bezier.com/.
Let’s see them all in action:
Transitioning multiple properties
We can transition multiple properties at once, by separating them with a comma.
.element {
transition: color 2s ease-out,
background-color 2s ease-out;
}
Which properties can be animated?
Lots! Here’s the full list here.
Conclusion
If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
If you enjoyed this article & would like to leave a tip — click here
Top comments (0)