"transición"Es una propiedad CSS que define el método más fácil para controlar la velocidad de la animación cuando el valor de CSS cambia de un valor a otro. La transición se puede implementar en el CSS "mostrar" propiedad. La propiedad de la pantalla se utiliza para controlar el diseño de un elemento, que incluye diseño de flujo, cuadrícula, flexión y muchos más.

Esta publicación examinará cómo aplicar transiciones utilizando la propiedad de visualización CSS.

Cómo aplicar las transiciones en la propiedad "Mostrar" CSS?

Los usuarios no pueden aplicar transiciones directamente en el CSS "mostrar" propiedad. Sin embargo, hay una forma alternativa de aplicar transiciones en la propiedad de visualización. Para este propósito, pase por el procedimiento mencionado a continuación.

Paso 1: Haga un "" contenedor

Primero, cree un contenedor DIV usando el ""Etiqueta junto con la clase asignada con un valor específico.

Paso 2: Agregue un encabezado

A continuación, inserte un encabezado utilizando cualquier "

" a "

"Etiquetas. Por ejemplo, "

"Agrega un encabezado.

Paso 3: Agregar datos a la lista

Para insertar los datos en forma de lista, use el "

" etiqueta:

Lista de animales de mascotas

Gallina

Pato

Perro

Gato

Conejo

La salida del código mencionado anteriormente es el siguiente:

Ahora, avance hacia la sección CSS para diseñar la lista.

Paso 4: Estilo ".elemento

Acceder al ""Elemento con la ayuda de la clase asignada".mascota”Y aplique las propiedades enumeradas:

.mascota
borde: 2px punteado RGB (230, 15, 15);
margen: 50px;
Color de fondo: RGB (252, 239, 169);

Aquí:

• "bordeLa propiedad se utiliza para especificar el límite alrededor del elemento.
• "margen"Define el espacio alrededor del límite del elemento.
• "color de fondo"Asigna un color en la parte trasera del elemento.

La imagen resultante muestra la salida del código anterior:

Paso 5: Estilo agregó la lista "Li"

Ahora, acceda a la lista del "div"Container que tiene clase"mascota" usando ".Pet-animal> li”Y aplique las propiedades mencionadas a continuación:

.Pet-animal> li
Visibilidad: oculto;
Opacidad: 0.2;
Transición: Visibilidad 0s, Opacidad 0.5s lineal;

Aquí:

• El "visibilidad"CSS se utiliza para establecer la visibilidad del elemento sin cambiar el diseño de un documento, como oculto o visible.
• "opacidad"Especifica la transparencia de un elemento.
• "transición"Permite a los usuarios cambiar los valores de las propiedades sin problemas durante una duración dada:

Paso 6: Aplicar la clase de pseudo "flotar"

Ahora, aplique el "flotar"Propiedad en la lista:

.Pet-animal: hover> li
Visibilidad: visible;
Opacidad: 1;

El ":flotar"CSS es una pseudo-clase que realiza cambios en el tiempo de ejecución cuando el puntero del mouse se mueve sobre el elemento. Haga una lista visible usando el "visibilidad"Y configure la transparencia usando el"opacidad"Propiedades de CSS a la lista en Hover:

Se puede observar que hemos aplicado con éxito la transición en el "mostrar" propiedad.

Conclusión

La transición CSS no se puede aplicar directamente al "mostrar" propiedad. Sin embargo, se puede aplicar de manera alternativa. Para hacerlo, agregue la etiqueta de lista en el documento HTML, acceda a la lista por nombre de la etiqueta y aplique "transición","opacidad", y "visibilidad"Propiedades de CSS en la lista. Luego, utiliza el ": flotar"Pseudo-Clase y establezca el valor de visibilidad como"visible". Esta publicación ha explicado cómo se aplica la transición a la propiedad de pantalla CSS.