Choosing the Right Transition Properties

We can specify any CSS property as a value for the transition-property property. It means that we can apply transition effect to any property.

css
Kopioi koodi
transition-property: ... /* any property */

Let's work with a couple of typical properties which are transitioned. The properties transition-duration, transition-timing-function, and transition-delay will always stay the same. All transitions will react on the cursor hover.

Multiple transition properties

We can also use the value all for the transition-property property, which means that all properties will be transitioned.

css
Kopioi koodi
transition-property: all;

In the following example we would like to transition the change of background-color, color, font-weight and font-size properties. Let's check the index.css file:

Also, if we need to add a transition to multiple properties but not to all, we can set them as a value for the transition-property property, separating them with the help of space. For example:

css
Kopioi koodi
transition-property: color border height;

It means that transition will be applied for the color, border, and height properties.