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.
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.css
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.css
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.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Pergunte-me perguntas sobre este assunto
Resumir este capítulo
Mostrar exemplos do mundo real
Awesome!
Completion rate improved to 2.04Choosing the Right Transition Properties
Deslize para mostrar o 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.css
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.css
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.
Obrigado pelo seu feedback!
