DEV Community

Cover image for CSS Transitions Tutorial
Richard Rembert
Richard Rembert

Posted on • Edited on

CSS Transitions Tutorial

#css #programming #tutorial #writing

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; }
Enter fullscreen mode Exit fullscreen mode

This is equivalent to:

.element { transition: property duration timing-function delay; }
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

Which is the same as:

.element { transition: transform 1s linear; }
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

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!
Buy Me A Coffee If you enjoyed this article & would like to leave a tip — click here

🌎 Let's Connect

Top comments (0)