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: pink;
  transition: background-color 2s ease-out;
.button:hover {
  background-color: yellow;

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

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:

Related Posts:

Tim profile image

A little about me..

Hey, I’m Tim! 👋

I’m a developer, tech writer & author. If you’d like to see all of my articles, you're in the right place! Browse the blog categories to find what interests you.

I’m currently working on building my Complete Guide to Freelancing. The bad news is that it’s not available yet! But if it’s something you might be interested in, you can sign up to be notified when it’s available 👍

Thanks for reading!