Course Content
Advanced CSS Techniques
Advanced CSS Techniques
Selecting Transition Property
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.
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
index
index
Multiple transition properties
We can also use the value all
for the transition-property
property, which means that all properties will be transitioned.
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
index
index
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:
It means that transition will be applied for the color
, border
, and height
properties.
Everything was clear?