Elegir las Propiedades de Transición Adecuadas
Podemos especificar cualquier propiedad CSS como valor para la propiedad transition-property. Esto significa que podemos aplicar un efecto de transición a cualquier propiedad.
transition-property: ... /* any property */
Trabajemos con un par de propiedades típicas que suelen ser objeto de transición. Las propiedades transition-duration, transition-timing-function y transition-delay siempre permanecerán iguales. Todas las transiciones reaccionarán al pasar el cursor.
index.html
index.css
Múltiples propiedades de transición
También se puede utilizar el valor all para la propiedad transition-property, lo que significa que todas las propiedades serán objeto de transición.
transition-property: all;
En el siguiente ejemplo se desea aplicar la transición a los cambios de las propiedades background-color, color, font-weight y font-size. Consultar el archivo index.css:
index.html
index.css
Además, si necesitamos agregar una transición a varias propiedades pero no a todas, podemos establecerlas como valor para la propiedad transition-property, separándolas con espacios. Por ejemplo:
transition-property: color border height;
Esto significa que la transición se aplicará a las propiedades color, border y height.
¡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
Can you explain what each transition property does?
Can you show an example of how transitions look in practice?
What are some common use cases for CSS transitions?
Awesome!
Completion rate improved to 2.04Elegir las Propiedades de Transición Adecuadas
Desliza para mostrar el menú
Podemos especificar cualquier propiedad CSS como valor para la propiedad transition-property. Esto significa que podemos aplicar un efecto de transición a cualquier propiedad.
transition-property: ... /* any property */
Trabajemos con un par de propiedades típicas que suelen ser objeto de transición. Las propiedades transition-duration, transition-timing-function y transition-delay siempre permanecerán iguales. Todas las transiciones reaccionarán al pasar el cursor.
index.html
index.css
Múltiples propiedades de transición
También se puede utilizar el valor all para la propiedad transition-property, lo que significa que todas las propiedades serán objeto de transición.
transition-property: all;
En el siguiente ejemplo se desea aplicar la transición a los cambios de las propiedades background-color, color, font-weight y font-size. Consultar el archivo index.css:
index.html
index.css
Además, si necesitamos agregar una transición a varias propiedades pero no a todas, podemos establecerlas como valor para la propiedad transition-property, separándolas con espacios. Por ejemplo:
transition-property: color border height;
Esto significa que la transición se aplicará a las propiedades color, border y height.
¡Gracias por tus comentarios!
