The Blog of Someone Who Builds Things on the Internet

I google how to do things, then post the answers here cause I'll probably forget. Maybe someone else finds it useful.

Using CSS Transition Property

Published November 29, 2020

Learned how to use the transition property of CSS today. It controls the transition when an object goes from one set of css properties to another, the second set of which is usually defined using a :hover.


selector {
    transition: <property> <duration> <timing-function> <delay>;

What each piece does:

  • property: which CSS property should the transition target. Should note that not all properties can be targeted, learned this when I was trying to do a transition on display. While writing this post I found a handy list of properties you can use here. Also, you can use the word all to just target everything which in my mind would work for 99% of use cases.
  • duration: how long should the transition last
  • timing-function: This controls the effect that is used to move between the two states. There is a ton of options, but honestly linear or ease will probably work for you.
  • delay: add a delay to the start of the transition


button {
    background-color: blue;
    transition: background-color 1s linear;

button:hover {
    background-color: green;

The above will change the colour of a button from blue to green when you hover over it with your mouse, and the change will take 1 second.

Source 1
Source 2