Cómo tener múltiples transiciones CSS en un elemento

Muchas plataformas en línea requieren animaciones en algunas páginas web para que la aplicación se vea más llamativa. Para este propósito, los desarrolladores usan propiedades CSS mientras diseñan las interfaces frontales. Más específicamente, las transiciones de CSS significan aplicar animaciones en un elemento HTML a través de las propiedades de CSS de tal manera que aplica automáticamente las propiedades una tras otra.

Este artículo discutirá el método para aplicar las propiedades de CSS para tener múltiples transiciones en un elemento HTML.

Cómo aplicar múltiples transiciones CSS en un elemento?

Todo lo que requiere es crear primero los elementos en HTML en los que se deben aplicar las transiciones y luego agregar el ID de CSS o los selectores de clase en el elemento de estilo para referirse a los elementos HTML.

Ejemplo

Creemos un elemento de contenedor Div en el cuerpo del código HTML y luego apliquemos las propiedades de CSS para que se vea animado:

Pasar el rato para ver las transiciones

Hola usuario!!!

En el fragmento de código anterior:

• • Un "

    "Se agrega encabezado con el CSS en línea"margen"Propiedad establecida en"1 REM"Y el encabezado dice"Pasar el rato para ver las transiciones".

  • Después de eso, un ""El elemento contenedor se agrega con la clase declarada como"mi clase".
  • El ""El elemento contenedor tiene el texto"Hola usuario!!!" dentro de eso. Las transiciones de CSS se aplicarán a este elemento div.

El elemento de estilo CSS debe tener todas las propiedades necesarias que hacen que el div se vea animado:

.mi clase
tamaño de fuente: 3rem;
margen: 2rem;
Justify-Content: Center;
Pantalla: Flex;
Border: 10px de color púrpura sólido;
Ancho: 20rem;
Altura: 9rem;
Transición: Color 1s Facilizados, conmovedor de la almohadilla,
Facilización de la Fuente de la Fuente, Sille-Out, de tamaño de fuente;

.myclass: hover
color azul;
borde: 10px de naranja sólida;
Top-top: 100px;
Botón de relleno: 40px;
tamaño de fuente: 1.8rem;

En el elemento de estilo CSS anterior:

• • Se agrega un selector de clase que se refiere al "mi clase"Div contenedor elemento. Dentro de él, varias propiedades de CSS se definen para el elemento del contenedor Div.
  • El "tamaño de fuente"La propiedad establece el tamaño del texto escrito en el contenedor Div a"3REM".
  • El "margen"Se agrega la propiedad para dar espaciado de"2rem"Después del texto o el encabezado.
  • El "Justify-ContentLa propiedad alinea el texto del contenedor Div al centro del contenedor Div.
  • El "pantalón de visualizaciónSe ha agregado la propiedad para alinear automáticamente el contenido en el elemento Div correctamente.
  • El "borde"Se agrega la propiedad para establecer el peso del borde del contenedor Div como"10px"Y define el color del borde como"púrpura".
  • El "ancho"La propiedad define la longitud vertical del elemento Div como"20rem".
  • Del mismo modo, el "altura"La propiedad define la longitud horizontal del elemento Div como"9 rem".
  • El "transiciónSe agrega la propiedad para definir el tiempo en que las transiciones deben aplicarse. Para "color","acolchado superior" y "fondo acolchado", Se ha establecido como"1 segundo" y para "tamaño de fuente", Se ha establecido como"3 segundos".
  • Después de eso, la pseudo-clase ":flotar"Se agrega con el selector de clase CSS".mi clase"Para definir las propiedades de CSS que se implementarán mientras el usuario se cierne sobre el elemento creado a través de"mi clase".
  • El "color"La propiedad se define como"azul"De modo que cuando el usuario se cierne sobre el elemento, cambia inmediatamente el color del texto a azul.
  • A continuación, el "borde"Se ha definido la propiedad que cambia el tamaño del borde a"10px"Mientras se cierne y el color para las fronteras se ha definido como"naranja".
  • El "acolchado superior" y "fondo acolchadoSe han agregado propiedades para definir el espacio entre el contenido y los bordes de la parte superior e inferior respectivamente.
  • El "tamaño de fuente" Se define como "8"Mientras flota.

Los resultados de las transiciones CSS aplicadas anteriormente serán los siguientes:

Esto resume el método para aplicar múltiples transiciones CSS en un elemento HTML.

Conclusión

Las transiciones CSS se aplican a los elementos HTML para que se vean animados. Todo lo que requiere aplicar transiciones CSS es agregar la identificación o el selector de clases en el elemento de estilo CSS que se refiere al elemento HTML en el que las transiciones deben aplicarse y luego agregar todas las propiedades necesarias en él, como color, fuente, bordes, relleno. antes y después de la transición. Este artículo guió sobre la aplicación de múltiples transiciones de CSS en un elemento HTML.