Animaciones CSS Transitions

Publicado el Vie 2 de Noviembre del 2018 a las 20:42

Sintaxis

La sintaxis general de la propiedad transition es:

transition: <propiedad> <duracion> <funcion-tiempo> <retraso>;

EJEMPLO

a {
    text-decoration: none;
    color: #00F; /*Color azul */
}
a:hover {
    color: #F00; /*Color Rojo */
}
a {
    transition: color 0.8s linear 0.2s;
}

Sintaxis alternativa

Estos cuatro parámetros se pueden escribir también por separado: 

EJEMPLO:

a {
    transition-property: text-decoration;
    transition-duration: 0.8s;
    transition-timing-function: linear;
    transition-delay: 0.2s;
}

DESCRIPCIÓN:

1. transition-poperty: propiedad a la que se le va a aplicar el efecto de transición. Cualquier propiedad CSS es válida: width, height, color, border, etc.
2. transition-duration: duración del efecto. Puede ser en segundos (s) o milisegundos (ms).
3. trasition-timing-function: define la curva de velocidad a la que se produce el efecto. Puede ser:
   • ease: este es el valor por defecto. Tiene un comienzo lento, luego rápido y termina de nuevo lentamente. Es equivalente a cubic-bezier(0.25,0.1,0.25,1).
   • linear: la misma velocidad durante toda la duración de la transición. Equivalente a cubic-bezier(0,0,1,1).
   • ease-in: efecto de transición con comienzo lento. Equivalente a cubic-bezier(0.42,0,1,1).
   • ease-out: efecto de transición con comienzo rápido y final lento. Equivalente a cubic-bezier(0,0,0.58,1).
   • ease-in-out: efecto de transición con comienzo y final lento; más rápido en medio. Equivalente a cubic-bezier(0.42,0,0.58,1).
   • cubic-bezier(n,n,n,n): define tus propios valores para la curva de Bezier. Cada valor es entre 0 y 1.
   • initial: establece esta propiedad a su valor por defecto.
   • inherit: hereda esta propiedad del elemento padre.
4. transition-delay: retraso en el comienzo de la transición. Puede ser en segundos (s) o milisegundos (ms).

¿Cómo usar las transiciones CSS?

Para crear un efecto de transición, debe especificar dos cosas:

1. la propiedad CSS a la que desea agregar un efecto
2. la duración del efecto

Nota: Si la parte de la duración no se especifica, la transición no tendrá efecto, porque el valor predeterminado es 0.

El siguiente ejemplo muestra un elemento <div> de 100px * 100px. El elemento <div> también ha especificado un efecto de transición para la propiedad de ancho, con una duración de 2 segundos:

EJEMPLO

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

El efecto de transición se iniciará cuando la propiedad CSS especificada (width) cambie de valor.

Ahora, especifiquemos un nuevo valor para la propiedad de ancho cuando un usuario se mueve sobre el elemento <div>:

EJEMPLO

div:hover {
    width: 300px;
}

 Tenga en cuenta que cuando el cursor salga del elemento, cambiará gradualmente a su estilo original.

Cambiar varios valores de propiedad

El siguiente ejemplo agrega un efecto de transición para las propiedades de ancho y alto, con una duración de 2 segundos para el ancho y 4 segundos para el alto:

div {
    -webkit-transition: width 2s, height 4s; /* Safari */
    transition: width 2s, height 4s;
}

Especifique la curva de velocidad de la transición

La propiedad transition-timing-function especifica la curva de velocidad del efecto de transición.

EJEMPLO:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Retrasar el efecto de transición

La propiedad de retardo de transición especifica un retraso (en segundos) para el efecto de transición.

El siguiente ejemplo tiene un retraso de 1 segundo antes de comenzar:

div {
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
}

Transición + Transformación

El siguiente ejemplo también agrega una transformación al efecto de transición:

div {
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}

Más ejemplos de transición

Las propiedades de transición de CSS se pueden especificar una por una, de esta manera:

div {
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;
}

o mediante el uso de la transición de propiedad de taquigrafía:

div {
    transition: width 2s linear 1s;
}