Introducción
En HTML, puede usar la propiedad de transición CSS (Transición) para crear efectos de animación, de modo que las propiedades de un elemento pasen sin problemas a un nuevo estado dentro de un cierto período de tiempo. Este tutorial presentará en detalle cómo usar transiciones de animación HTML y códigos de muestra.
Propiedad de transición (transition-property)
Las propiedades de transición se utilizan para especificar las propiedades de CSS para la transición. Puede seleccionar uno o más atributos para la transición.
-
gramática básica
.element {
transition-property: property1, property2, ...;
}
En el código anterior, .elementes el selector del elemento al que desea aplicar la transición. property1, property2, ...es el nombre de la propiedad que desea cambiar en la transición, separados por comas.
-
Transición de atributo único
.element {
transition-property: width;
}
El código anterior hará que .elementla propiedad de ancho del elemento cambie en la transición. Cuando cambia el ancho del elemento, la transición se activará y pasará sin problemas al nuevo valor de ancho.
-
Múltiples transiciones de propiedad
.element {
transition-property: width, height, opacity;
}
El código anterior hará que .elementlas propiedades de ancho, alto y transparencia del elemento cambien en la transición. Independientemente de estos atributos