Transiciones en CSS

Para que su diseño web sea atractivo, debe agregar ciertas animaciones a su contenido. Para manejar el comportamiento de estas animaciones, se utilizan las transiciones CSS. Las transiciones se denominan un cambio en el estado de un elemento sin problemas en una duración especificada. Por lo tanto, al aplicar los efectos de transición en varios elementos CSS, debe indicar la propiedad CSS en la que se aplicará el efecto, así como el tiempo del efecto. Especificar la duración es muy importante o no, no habrá efecto de transición en el elemento particular.

Hay ciertas propiedades de transición de CSS que se utilizan para agregar efectos de transición en varios elementos, las explicamos en detalle a continuación.

Propiedades de transición de CSS

CSS proporciona varias propiedades de transición que son las siguientes.

1. propiedad de transición
2. duración de la transición
3. retraso de transición
4. función de transición
5. transición

Todas las propiedades mencionadas anteriormente se explican a continuación.

propiedad de transición

Esta propiedad se utiliza para especificar varias propiedades CSS a las que se debe aplicar el efecto de transición.

Sintaxis

transición-propiedad: ninguno | Todos | propiedad | heredar | inicial;

Todo el valor es un valor predeterminado que aplica el efecto de transición a todas las propiedades especificadas, mientras que el valor de la propiedad especifica el nombre de la propiedad en el que se aplicará el efecto.

Ejemplo
Supongamos que desea alterar el ancho y la altura de un contenedor Div utilizando la propiedad de transición.

Html

Trae mouse sobre mí

Simplemente estamos definiendo un contenedor Div.

CSS

div
Ancho: 100px;
Altura: 90px;
Antecedentes: rosa;
Propiedad de transición: ancho, altura;
Duración de transición: 2s;

Div: Hover
Ancho: 250px;
Altura: 250px;

Estamos estableciendo el ancho original del DIV a 100px y la altura a 90px, luego estamos aplicando un efecto de transición tanto en el ancho como en la altura de DIV durante 2 segundos. Especificar la duración es imprescindible, de lo contrario, la transición no se aplicará. Además, el efecto de transición ocurrirá cuando el usuario traiga el mouse en el contenedor Div.

Producción

Se implementó un efecto de transición con éxito en el contenedor DIV.

duración de la transición

Esta propiedad especifica cuánto tiempo debe continuar ocurriendo el efecto de transición. A cada propiedad se le puede dar una sola duración o puede asignar diferentes duraciones a varias propiedades de CSS.

Sintaxis

Duración de tiempo: Tiempo | heredar | inicial;

El parámetro de tiempo especifica la duración del efecto de transición.

Ejemplo
Supongamos que desea aumentar el tamaño de fuente y el peso de un párrafo cuando se presenta un cursor del mouse.

Html

Trae mouse sobre mí

Hemos definido nuestro párrafo.

CSS

pag
tamaño de fuente: 20px;
Propiedad de transición: tamaño de fuente;
Duración de transición: 3s;

P: Hover
tamaño de fuente: 50px;

El código anterior especifica que cuando se presenta el cursor del mouse sobre el párrafo, el tamaño de fuente del párrafo cambiará y este efecto ocurrirá durante 3 segundos.

Producción

La propiedad de duración de la transición funciona correctamente.

retraso de transición

Esta propiedad especifica el retraso entre un cambio en una propiedad y el inicio del efecto de transición.

Sintaxis

Duración de tiempo: Tiempo | heredar | inicial;

El parámetro de tiempo especifica la duración de espera antes de que comience el efecto de transición.

Ejemplo
Supongamos que desea aplicar un efecto de transición en un elemento Div después de un retraso de 2 segundos, siga el ejemplo a continuación.

Html

Trae mouse sobre mí

En el código anterior, simplemente hemos creado un contenedor Div.

CSS

div
Altura: 100px;
Ancho: 100px;
Color de fondo: rosa;
Propiedad de transición: altura;
Duración de transición: 3s;
transición-retraso: 2s;

Div: Hover
Altura: 200px;

Según la pieza de código anterior, el efecto de transición ocurrirá después del retraso de 2 segundos.

Producción

Este es un efecto de transición con un retraso de 2 segundos.

función de transición

Esta propiedad se utiliza para definir la curva de aceleración del efecto de transición.

Sintaxis

Función de transición-tiempo: facilidad | lineal | Facilidad | Facilidad | Facilia-out | cúbico-bezier (n, n, n, n);

Todos los parámetros se explican a continuación.

• facilidad: El efecto de transición ocurre de manera lenta y lenta.
• lineal: El efecto de transición tendrá la misma velocidad de principio a fin.
• facilidad en: El efecto de transición tendrá un comienzo lento.
• Facilitarse: El efecto de transición tendrá un final lento.
• Facilia: El efecto de transición tendrá un comienzo lento y un extremo lento.
• Cúbico-Bezier (N, N, N, N): Los valores del efecto de transición se establecerán de manera cúbica.

Ejemplo
Considere el ejemplo a continuación.

Html

Trae mouse sobre mí

Simplemente se creó un contenedor Div simplemente.

CSS

div
Altura: 100px;
Ancho: 100px;
Color de fondo: rosa;
Propiedad de transición: ancho;
Duración de transición: 2s;
Función de transición-tiempo: lineal;

Div: Hover
Ancho: 200px;

Según el código anterior, el ancho del contenedor Div cambiará de manera lineal, lo que significa que el efecto de transición tendrá la misma velocidad de principio a fin.

Producción

El efecto de transición está sucediendo de manera lineal.

transición

Esta propiedad es una propiedad abreviada que se utiliza para establecer valores en todas las propiedades de transición anteriores.

Sintaxis

transición: (propiedad) (duración) (función de tiempo) (retraso);

Ejemplo
El siguiente ejemplo demuestra el funcionamiento de la propiedad de transición.

CSS

div
Altura: 100px;
Ancho: 100px;
Color de fondo: LightSeagreen;
Transición: ancho 0.5s lineal 1s;

Div: Hover
Ancho: 200px;

Usando la propiedad de transición, estamos aplicando un efecto de transición en el ancho para 0.5 segundos de manera lineal con un retraso de 1 segundo.

Producción

La propiedad de transición funciona correctamente.

Conclusión

Las transiciones se denominan un cambio en el estado de un elemento sin problemas en una duración especificada. CSS proporciona varias propiedades de transición que son las siguientes: propiedad de transición, duración de la transición, retraso de transición, función de transición y transición y transición. Todas estas propiedades se utilizan para especificar el comportamiento del efecto de transición que se aplica en varios elementos HTML. En esta guía, todas estas propiedades se explican con la ayuda de ejemplos relevantes.