Front.id

Gracias a la propiedad animations con CSS3 podemos conseguir animaciones. Para ello basta con entender algunos conceptos básicos y a partir de ahí dejar volar la imaginación. Vamos a adentrarnos en la estructura básica de una animación utilizando keyframes.

La teoría

Los parametros que recibe animation son:

animation-delay: es el tiempo de retardo entre que el elemento se carga y el comienzo de la animación. El valor por defecto es 0 y podemos utilizar segundos (s) o milisegundos (ms) como valores (por ej.: 2s ó 200ms).

animation-direction: especifica si la animación debe ser solo lineal o se debe invertir al terminar. El valor por defecto es: normal (una vez concluida la animación esta volverá a empezar desde el primer fotograma). Otro valor posible es: alternate, que una vez que llegue al final, invertirá el sentido de la animación.

animation-duration: la duración que tendrá. El valor por defecto es 0 y podemos utilizar segundos (s) o milisegundos (ms) como valores (por ej.: 2s ó 200ms).

animation-iteration-count: El número de veces que se repite. El valor por defecto es 1 y podemos indicar una cantidad numérica o utilizar infinite para que se repita indefinidamente.

animation-name: especifica el nombre de la animación y también sera el nombre asociado a los @keyframes (por ej.: foo);

animation-play-state: determina si la animación esta activa o no. El valor por defecto es: running (la animación va a ser reproducida) y el otro valor posible es: paused (la animación se pausará).

animation-timing-function: Indica el ritmo de la animación, es decir, como se muestran los fotogramas de la animación, estableciendo curvas de aceleración. EL valor por defecto es: ease. Puedes definir tu propia curva de aceleración con: cubic-bezier(x,x,x,x): donde los valores posibles son de 0 a 1. Puedes jugar con esto y solucionar tus necesidades desde aquí. Ó hacer uso de valores pre establecidos:

animation-fill-mode: permite definir qué valores aplica la animación fuera del tiempo de ejecución. Esto puede ser antes de que la animación haya sido aplicada, y/o después de que haya terminado de ejecutarse.  El valor por defecto es: none es decir que la animación no aplicara ningún estilo al elemento antes y después de ser ejecutada. Otros posibles valores son:

Uso

Algo a tener en cuenta, es que podemos declarar individualmente las propiedades:

.elemento {
  animation-name: stretch;
  animation-duration: 5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

O agruparlas en una declaración abreviada:

.elemento{
  animation: [NombreAnimación] [Duración] [FunciónTiempo] [Retraso] [Iteraciones] [Dirección]
}

Ahora llega el momento de declarar la secuencia de nuestra animación, con @keyframes podemos establecer el inicio y el final, como también los posibles puntos intermedios.

A estos puntos de nuestra secuencia podemos declararlos de dos formas:

Declarando "desde" y "hasta", en caso que solo necesitemos indicar el inicio y el final

@keyframes foo {
    from {

    }

    to {
        
    }
}

Declarando porcentajes sobre el tiempo que dure la animación, esto permite mayor cantidad de valores

@keyframes foo {
    0% {

    }

    50% {

    }

    100% {
        
    }
}

Los valores van expresados en el porcentaje, yendo desde o a 100% de la duración de la animación.

Ejemplo

Ahora que sabemos como funciona probemos todo en el siguiente ejemplo

Y aquí un ejemplo más complejo.