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

CSS Transitions Tutorial