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.
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Pregunte me preguntas sobre este tema
Resumir este capítulo
Mostrar ejemplos del mundo real
Awesome!
Completion rate improved to 2.04Choosing the Right Transition Properties
Desliza para mostrar el menú
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.
¡Gracias por tus comentarios!
