Transiciones

  

Las transiciones permiten que los valores de las propiedades CSS varían con el tiempo, proporcionando animacioanes sencillas. Por ejemplo, si un determinado elemento cambia de color cuando pasamos el ratón por encima, podemos hacer que se desvanezca gradualmente de un color al otro, en lugar de un cambio repentino.

De igual forma, podemos animar cualquiera de las transformaciones mencionadas, consiguiendo unas páginas más dinámicas.

Las transiciones se declaran junto con los estilos normales en un elemento. Siempre que cambien las propiedades objetivo, el navegador aplicará la transición.

Método para crear una transición sencilla:

  1. Declaramos el estado inicial del elemento (declaración de estilo predeterminada)
  2. Declaramos el estado final, por ejemplo al pasar el ratón por encima
  3. Incluimos las funciones de transición en su declaración de estilo predeterminada

transition-porperty

Lista las propiedades del elemento a las que se debería aplicar la transición. Se incluyen propiedades de fondo, borde, modelo de caja. Se pueden incluir cualquier cantidad de propiedades CSS en la declaración transition-porperty separadas por coma. También podemos usar la palabra clave all para indicar que cada propiedad que se soporte debería estar animada.

transition-porperty: transform;

transition-duration

Establece cuanto durará la transición. Podemos especificar esto en segundos (s) o en milisegundos (ms).

transition-duration: 0.2s;

transition-timing-function

Nos permite controlar el ritmo de la transición con mayor detalle. Podemos hacer que la transición empiece rápido y termine más lenta, o viceversa; avance siempre igual o con variaciones distintas. Para especificar todo esto utilizamos: ease,ease-in,ease-out,ease-in-out,cubic-bezier,linear.

transition-timing-function: ease-out;

transition-delay

Es posible incorporar un retraso antes de que empiece la animación. Normalmente, una transición empieza de inmediato, por lo que el predeterminado es 0. Podemos incluir un número de milisegundos (ms) o segundos (s) para retrasarla.

transition-delay: 200ms;