Transiciones

Las transiciones CSS, parte del borrador de la especificación CSS3, proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instantáneo. Al habilitar las transiciones CSS, el cambio sucede en un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleración que puedes personalizar.

Por ejemplo:


Las propiedades de transición CSS Las transiciones CSS se controlan mediante la propiedad abreviada "transition". Es preferible utilizar este método porque de esta forma se evita que la longitud de la lista de parámetros sea diferente, lo que puede dar lugar a tener que emplear un tiempo considerablemente largo en depurar el código CSS. Alguna de las propiedades de transición son:

Especificar la curva de velocidad de la trasición

Para esto se utiliza "transition-timing-function", el cual tiene las siguiente propiedades:


Algunos ejemplos de esto:

Retraso en la transición

Se utiliza con "transition-delay". Algún ejemplo podría ser:


Duración de la transición

Esta propiedad marca el tiempo en la que tarda en hacer la transicion.


Ir hacia arriba