Una de las innovaciones de CSS3 es la capacidad de crear transiciones y animaciones con comportamientos. La animación CSS3 se puede usar en numerosos fotogramas clave para cambiar la apariencia y el comportamiento de un elemento. Una animación establece muchos puntos de transición basados ​​en distintos fotogramas clave, mientras que las transiciones le permiten pasar de un estado a otro.

A lo largo de este artículo, examinaremos:

• Propiedad de transición en CSS
• Cómo usar la propiedad de transición en CSS?

Muy bien, comencemos!

¿Qué es la propiedad de transición en CSS??

El "propiedad de transición"Nos permite modificar los valores de la propiedad sin problemas según la duración especificada. Ocurre cuando la propiedad CSS cambia su valor de uno a otro sin parpadear. Dependiendo de su estado, se puede pasar o activo. Ahora, pasemos a la sintaxis de la propiedad de transición.

Sintaxis

Hay dos cosas que debe especificar al crear un efecto de transición:

• Agregar un efecto a una propiedad CSS.
• Establecer la duración del efecto.

Siga la siguiente sintaxis para agregar un efecto de transición utilizando la propiedad de transición:

Propiedad de transición: valor;

En el lugar de valor, agregue un efecto de transición que desea aplicar.

Siga la sintaxis dada a continuación para agregar el efecto de duración utilizando la propiedad de duración de la transición:

Duración de transición: valor;

Dependiendo de sus preferencias, también puede agregar un retraso de transición y una función de tiempo.

Aquí hay un ejemplo en el que implementamos la transición de deslizamiento.

Cómo usar la propiedad de transición en CSS?

Nosotros podemos usar "propiedad de transición"En cualquier elemento como div, rumbo, botón y muchos más.

Al usar un ejemplo, veamos cómo funciona la propiedad de transición.

Ejemplo: Cómo deslizar desde la transición izquierda en CSS?

El siguiente ejemplo, crearemos un encabezado

dentro de :

Deslice la transición de la izquierda

Cuando ejecutemos este archivo HTML, mostrará el siguiente resultado:

Aquí, podemos ver que se presenta un encabezado simple. Ahora nos moveremos a la sección CSS, donde aplicar la propiedad de transición al contenedor creado. Para este propósito, escribiremos el siguiente código:

div
Ancho: 150px;
Altura: 150px;
Antecedentes: Goldenrod;
Propiedad de transición: ancho;
Duración de transición: 1s;

El bloque de código anterior sirve a las siguientes funcionalidades:

anchura y altura: El tamaño de div es "150px"En ancho y"150px" En Altura.

fondo: El color del div se establece en "mancha de oro".

Propiedad de transición: Hemos establecido la propiedad de transición al ancho; A través de esto, se deslizará desde la izquierda en transición.

duración de la transición: "1s"O un segundo es la duración de la transición. Cuando sacamos el cursor del Div, en un segundo, irá a su estado original.

Nota: Siempre que cambie la propiedad de ancho CSS, el efecto de transición comenzará.

Ahora tome un nuevo valor para la propiedad de ancho que se utilizará para mousar sobre el elemento Div. El tamaño de la propiedad de ancho está establecido en "500px". Se deslizará de la izquierda a derecha cuando un cursor se mueva al elemento, y cuando mueva el mouse fuera del elemento, el estilo volverá gradualmente a su estado original:

Div: Hover
Ancho: 500px;

Después de eso, vaya al archivo HTML y ejecútelo. Dará la siguiente salida:

Habiendo aplicado la propiedad de transición al DIV, ahora podemos ver que está activo.

Conclusión

En CSS, para la transición de la izquierda, el ""propiedad de transición"Se usa. Puede establecer el efecto de la transición y su duración utilizando el "propiedad de transición" y "duración de la transición"Propiedades, respectivamente. Con la ayuda de un ejemplo, este artículo demostró cómo se usa la propiedad de transición para deslizarse de izquierda a derecha.