transiciones de propiedades mediante CSS

CSS | transiciones Propiedad: En este tutorial, vamos a aprender acerca de la propiedad transiciones el uso de CSS con la sintaxis, ejemplos .

CSS | Propiedad transiciones

Cuando el propiedad CSS cambia el resultado renderizado se actualiza inmediatamente y los elementos afectados cambiar al instante su valor de la propiedad antiguo al nuevo valor de la propiedad. Este enfoque se describe una forma de especificar transiciones utilizando las propiedades CSS . Estas propiedades se utilizan para cambiar suavemente desde el estado antiguo al nuevo estado.

básico Sintaxis:

Element {
transition: width 2s;
}

A continuación se presentan las propiedades de la transición,

  1. transición de la propiedad
  2. transición de retardo
  3. transición de duración
  4. transición timing-
  5. función

Ahora vamos a ver una por una todas estas propiedades,

1) de transición de la propiedad

esta propiedad especifica el nombre de la propiedad CSS al que se aplica la transición.

Si el valor es ninguno que significa que ninguna propiedad pasará. La palabra clave todos los medios que todas las propiedades se van a la transición, se le da.

Cada propiedad transición acepta una lista separada por comas que permite múltiples transiciones a ser definidos, cada uno que actúa sobre una propiedad diferente. Aquí las transiciones individuales toman sus parámetros desde el mismo índice en todas las listas.

Los valores de propiedad class transición de la propiedad,

  • ninguno : ninguno de los bienes obtendrá los efectos de transición.
  • todo : todas las propiedades obtendrán los efectos de transición.
  • inicial : este valor se establece la propiedad a su valor inicial for.
  • hereda : este valor de propiedad se hereda de su elemento padre.
  • propiedad : se trata de un valor efecto de transición.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 50px;
height: 50px;
background: green;
transition-property: width;
}
div:hover {
width: 100px;
}
</style>
</head>
<body>
<p>The transition property in CSS</p>
<div></div>
</body>
</html>

salida

transitions Property using CSS - 4

En el ejemplo anterior, si la libración sobre la caja se expande por 100px de ancho.

2) transición de retardo

Esta propiedad CSS especifica la cantidad de tiempo que se necesita para esperar antes de que el efecto de transición se inicia. Generalmente, la altura comienza la transición de inmediato, pero que espera la anchura default 1 segundo.

Si el valor de transición es 0, entonces la transición se iniciará tan pronto como se cambia la propiedad.

valores de las propiedades class transición de retardo,

  • tiempo : es la cantidad de tiempo de espera antes el efecto de transición se inicia.
  • inicial : Establece la propiedad a su valor inicial class.
  • hereda : hereda la propiedad del elemento padre.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 75px;
height: 75px;
background: green;
transition: width 3s;
transition-delay: 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<p>Transition-delay property in CSS</p>
<div></div>
</body>
</html>

salida

transitions Property using CSS - 5

En el ejemplo anterior, efecto de transición tiene un retardo de 1 segundo antes de empezar cuando Pase el ratón sobre la caja verde.

3) de transición de duración

Esta propiedad CSS especifica cómo for la transición desde el valor antiguo al nuevo valor debe tomar. Por for el valor es 0 en segundo lugar, lo que significa que la transición es inmediata.

Si el valor es negativo, entonces se hace la declaración sin efecto.

valores de las propiedades default transición de duración,

  • tiempo : cantidad de efecto de transición de tiempo necesario para completar la transición.
  • inicial : Establece la propiedad a su valor inicial class.
  • hereda : hereda su propiedad de su elemento padre.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 75px;
height: 75px;
background: green;
transition-duration: 3s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<p>Transition-duration property in CSS</p>
<div></div>
</body>
</html>

salida

transitions Property using CSS - 6

En el ejemplo anterior, la duración es 3s sobre las que la transición debe tener lugar.

4) de transición de sincronización-función

Esta propiedad CSS Especifica cómo se calculan los valores intermedios utilizados durante una transición. Esta propiedad permite la transición a la velocidad de cambio con respecto a la duración. Estos efectos también se denominan funciones de aceleración.

Los valores de propiedad long transición-timing-función,

  • aliviar : define efecto de transición con un comienzo lento y luego rápido.
  • lineal : define efecto de transición con la misma velocidad de principio a fin.
  • facilidad en : define efecto de transición con velocidad lenta en el inicio.
  • facilidad de salida : define efecto de transición con velocidad lenta al final.
  • facilidad-in-out : define efecto de transición con velocidad lenta en el inicio y final ambos.
  • paso-START : es equivalente a pasos (1, inicio) .
  • paso final : es equivalente a pasos (1, final) .
  • cúbico-Bezier () : se utiliza para definir sus valores de 0 a 1 en la función.
  • inicial : Establece la propiedad a su valor inicial default.
  • hereda : hereda su propiedad de su elemento padre.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 75px;
height: 75px;
background: green;
transition-duration: 3s;
transition-timing-function: linear;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<p>Transition-timing-function property in CSS</p>
<div></div>
</body>
</html>

salida

transitions Property using CSS - 7

En el ejemplo anterior, se aplica el lineal transición-timing-función .


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *