Transition Properties

We can use transition properties to control exactly how elements transition between states.

Let's use the transition-duration property to change the background color transition for button from the last lesson.

button {
  height: 50px;
  width: 200px;
  font-size: 30px;
  background-color: #21A0CB;

  transition-duration: 2s;
}
button:hover {
    background-color: #FEE440;
}

The input in this case can be either in seconds (s) or milliseconds(ms).

The transition-timing-funtion works similarly to the animation timing function, and has the same input options:

• ease - default, speeds up and then slows down (the speed at the beginning is still higher than at the end)
• linear - same speed throughout
• ease-in - starts slow, speeds up
• ease-out - starts fast, slows down
• ease-in-out - speeds up, then slows down, but it is more symmetrical than "ease"
• cubic-bezier - more detailed function, specify the anchor points of the function in the form cubic-bezier(x1, y1, x2, y2)

The transition-delay delays the animation, and accepts values in either seconds or milliseconds.

Finally, the transition property is a shorthand way to specify multiple properties at once.

Here's an example:

button {
  background-color: #21A0CB;
  height: 50px;
  font-size: 30px;
  border: none;
}
button {
  transition: all 1s linear 0s;
}
button:hover {
  background-color: #FEE440;
}

As you can see, transition accepts four values:

1. transition-property (in the example, "all")- the specific element to which the rest of the properties should apply, for example "color"
2. transition-duration ("1s" in the example)
3. transition-timing-function ("linear" in the example)
4. transition-delay ("0s" in the example)

Instead of "background-color" for the transition property, the example above uses "all". Since background is the only property changed, this makes no difference. If there were any other properties changing, the transition would apply to all of them.