Cómo establecer la altura de transición en CSS

En aplicaciones web, es necesario transmitir el mensaje de manera eficiente. Los desarrolladores entregan sus conceptos a sus espectadores de una mejor manera mediante el uso de animaciones. Para configurar diferentes propiedades de la animación, como los estados y la velocidad, se utilizan transiciones. En CSS, las transiciones ayudan a aplicar varios efectos sobre elementos HTML como duración y retraso.

Cómo establecer la altura de transición en CSS?

En CSS, la altura de transición se puede establecer utilizando las siguientes propiedades:

• propiedad de transición
• Transformar con la propiedad de transición

Entonces, comencemos con el método uno!

Método 1: Establezca la altura de transición utilizando la propiedad de transición CSS

A "transición"Es un marco de tiempo establecido al especificar el estado inicial y final de un elemento. Es la propiedad en taquigrafía de todas las propiedades de transición a mano, como la duración de la transición o la propiedad de transición.

Sigamos adelante y tomemos un ejemplo para comprender cómo se puede usar la propiedad de transición para establecer la altura de transición.

Ejemplo 1

Dentro del archivo HTML, especifique el ""Entre etiquetas.

Html

Primero, especificaremos el "color de fondo"Propiedad con valor"naranja". Luego, asigne las propiedades de altura y ancho con valores "100px" y "50px". Ahora, configure el "transición"Propiedad con el"Altura 1S" valor; La altura 1S especifica que el elemento realizará la acción asignada en un segundo en una dirección vertical.

En el siguiente paso, usaremos el selector ":flotar"Con elemento div y establece la propiedad de altura como"200px". Esto hará que la línea vertical se expandirá de 100px a 200px cuando pasemos nuestro puntero en el elemento.

CSS

div
Color de fondo: naranja;
Altura: 100px;
Ancho: 50px;
Transición: altura 1s;

Div: Hover
Altura: 200px;

Guardemos el código mencionado y lo ejecutemos en el navegador:

Como puede ver en la salida anterior, la altura de transición se ha establecido con éxito.

Método 2: Establezca la altura de transición utilizando la propiedad de transformación CSS

Las variaciones 2D o 3D que se pueden implementar en elementos HTML resultan del "transformar" propiedad. Puede realizar diferentes acciones utilizando esta propiedad, como escala, sesgo, traducir y rotar. Si no conoce estas operaciones mencionadas, consulte este artículo dedicado.

Ejemplo

Estableceremos el valor del "transformar"Propiedad como"Scaley (1)"; Aquí, el Scaley se usa para ajustar un elemento verticalmente y pasar "1"Como su argumento aumentará la altura. Estableceremos el "transformación"Propiedad con el valor"arriba", Que indica que la transformación se aplicará desde el punto superior. Ahora, le daremos a la propiedad de transición un valor "transformar 1s, 1s", Donde los primeros 1 es para el ancho, y el otro es para altura; Esto especificará la transformación de un segundo sobre el elemento seleccionado.

Use el selector: Hover y asigne a la propiedad de transformación un valor "Scaley (1.1)". Como resultado, cuando el puntero se coloca en el elemento, su tamaño aumentará, respectivamente.

CSS

div
Color de fondo: naranja;
Altura: 100px;
Ancho: 50px;
transformar: escala (1);
transformación de origen: arriba;
Transición: transformar 1s, 1s;

Div: Hover
Altura: 200px;
Transformar: Scaley (1.1);

Producción

Hemos cubierto cómo establecer la altura de transición en CSS.

Conclusión

Para establecer la altura de transición, el "transiciónSe puede utilizar la propiedad. Se necesita el valor de segundos como argumento para realizar una acción específica durante un tiempo determinado. Además, CSS "transformar"La propiedad junto con la transición también se puede utilizar en la que debe especificar la escala de transformación y el origen para lograr los resultados deseados. Esta guía demuestra todos los métodos eficientes para establecer la altura de transición en CSS.