Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Choosing the Right Transition Properties | Creating Smooth Transitions in CSS
Advanced CSS Techniques

bookChoosing 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.

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.

index.html

index.html

index.css

index.css

copy

Multiple transition properties

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

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:

index.html

index.html

index.css

index.css

copy

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:

transition-property: color border height;

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

question mark

What does the transition-property property determine?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 3. ChapterΒ 2

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Awesome!

Completion rate improved to 2.04

bookChoosing the Right Transition Properties

Swipe to show menu

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.

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.

index.html

index.html

index.css

index.css

copy

Multiple transition properties

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

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:

index.html

index.html

index.css

index.css

copy

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:

transition-property: color border height;

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

question mark

What does the transition-property property determine?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 3. ChapterΒ 2
some-alt