Establecer transiciones en CSS

1. Utilice las propiedades de opacity y visibility junto con la propiedad transition para establecer la transición en CSS
2. Utilice las propiedades de height, opacity y overflow junto con la propiedad de transition para establecer la transición en CSS

Este artículo presentará métodos para configurar la transición en CSS. Aprenderemos a usar la transición en opacity, height y visibility para dar efectos de aparición y desaparición gradual al pasar el mouse sobre y al alejarse.

Utilice las propiedades de opacity y visibility junto con la propiedad transition para establecer la transición en CSS

No podemos usar la propiedad transition en la propiedad display en CSS. Por ejemplo, no podemos cambiar display : none a display : block después de pasar el mouse (ratón) y viceversa usando la propiedad de transition de CSS. Por lo tanto, podemos utilizar las propiedades de opacity y visibility junto con la transición para dar efectos de aparición y desaparición gradual de los elementos. La transición tiene ciertas propiedades como transition-property, transition-duration, transition-timing-function y transition-delay. También podemos usar la propiedad abreviada de transición como transition : opacity 2s linear 1s. Aquí, opacity indica propiedad de transición, 2s indica transition-duration, linear indica transtion-timing-function y 1s indica transition-delay. Podemos usar el hover para experimentar con la transition.

Por ejemplo, cree un div y use las etiquetas ul y li para hacer una lista de tres elementos de lista desordenados. Dale al div un borde de 1px negro sólido para verlo. Establezca las propiedades de ul como opacidad: 0 y visibilidad: oculta y transición: visibilidad 0 s, opacidad 0,6 s lineal. Estamos usando tanto opacity como visibility porque si usamos solo opacity: 0, los elementos aún se pueden hacer clic y desplazarse. Establezca la propiedad de desplazamiento ul como visibility: visible y opacity: 1 para que los elementos de la lista de ul solo se muestren mientras se desplaza con algún efecto de transition.

El siguiente ejemplo muestra que los elementos de ul solo son visibles mientras se desplaza. Los elementos aparecen con un efecto lineal en 0,6 segundos y se vuelven a ocultar mientras se aleja el mouse.

Código de ejemplo:

<div>
 <ul>
 <li> Apple </li>
 <li> Banana </li>
 <li> Mango </li>
 </ul>
</div>

div {
 border : 1px solid black;
}
div > ul {
 visibility: hidden;
 opacity: 0;
 transition : visibility 0s, opacity 0.6s linear;
}
div:hover > ul {
 visibility : visible;
 opacity : 1;
}

Utilice las propiedades de height, opacity y overflow junto con la propiedad de transition para establecer la transición en CSS

Otra alternativa al uso de la transición sobre display: none y display: block podrían ser las propiedades de height, overflow y opacity utilizadas junto con la transición. Podemos establecer opacidad: 0 y altura: 0 para la lista para que los elementos no se vean. También tenemos que configurar overflow: hidden para que los elementos no salgan del div mientras que transition-duration lleva tiempo. Podemos usar la propiedad abreviada de transition como está en el primer método.

Por ejemplo, cree un div y cree una lista de tres elementos desordenados utilizando las etiquetas ul y li. Dale al div un borde de 1px solid black, lo mismo que con el primer método. Establezca las propiedades de ul como opacity: 0, overflow: hidden y height: 0. Establezca el valor de la propiedad transition como opacidad 0,6 s facilidad de entrada. Establezca la propiedad de desplazamiento ul como height: auto y opacity: 1 para que los elementos de la lista de ul solo se muestren mientras se desplaza con el efecto de transition.

El siguiente ejemplo muestra que div está vacío y la height de div es 0px. Pero cuando pasamos el cursor sobre el div, la lista de elementos se muestra con el efecto ease-in. La opción ease-in establece el inicio lento de la transición. La propiedad height de div se convierte en auto. Cuando salimos del div, vuelve a quedar vacío.

Código de ejemplo:

<div>
 <ul>
 <li>Apple</li>
 <li>Banana</li>
 <li>Mango</li>
 </ul>
</div>

div {
 border: 1px solid black;
}
div > ul {
 opacity: 0;
 height: 0;
 overflow: hidden;
 transition: opacity 0.6s ease-in;
}
div:hover > ul {
 opacity: 1;
 height: auto;
}