Animaciones
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-interation-countanimation-directionanimation-fill-modeanimation-play-state

<< Transiciones regla @keyframes >>

Las transiciones como hemos visto es una forma de suavizar un cambio, las animaciones se busca lo mismo pero permitiendo añadir más estados. Para crear animaciones necesitamos hacer uso de la propiedad animation y definir con la regla @keyframes de la animación y sus estados.

Como transition hay una propiedad que engloba todas las propiedades de animation y esta es: animation: <name><duration><timing-function><delay><interaction-count><direction><fill-mode><play-state>. Veamos cada una de ellas poco a poco.

div {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    border-radius: 50px;
    background-color: red;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
}
  
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px; border-color: yellow;}
    50%  {background-color:blue; left:200px; top:200px; border-color: blue;}
    75%  {background-color:green; left:0px; top:200px; border-color: green;}
    100% {background-color:red; left:0px; top:0px;}
}

animation-name

Nombre de la animación a aplicar para uno o más @keyframe(o none en el caso de no querer aplicar ninguna animación). El nombre de la animación debemos ponerlo en kebab-case, es decir, primer carácter una minúscula y los espacios serán guiones.

animation-duration

Esta propiedad nos permite establecer la duración de una animación. Es importante indicarle las unidades (segundos o milisegundo).

animation-timing-function

Esta propiedad, nos permite establecer el ritmo que llevará la animación, de la misma forma que en las transiciones, los valores que puede tener esta propiedad los podéis encontrar aquí.

animation-delay

Esta propiedad nos permite establecer el retardo con el que empezará la animación

animation-interation-count

Con esta propiedad podemos indicar el número de veces que queremos que se repita una determinada animación, este valor puede ser un número o infinite si queremos que se repita continuamente.

animation-direction

Con esta propiedad podemos poner el orden en el que se van a producir los fotogramas. Los valores que puede tener esta propiedad son: normal (desde el primero al último), reverse (del último al primero), alternate (en interaciones par se reproducen normal, en impares como reverse), alternate-reverse (en interaciones par se reproducen como reverse, en impares como normal)

animation-fill-mode

La propiedad animation-fill-mode nos permite establecer una animación antes y después de acabar (salvo si está marcada como infinite). Con esto podemos establecer qué debe hacer la animación cuando no se está reproduciendo. Los valores que puede tomar son: none, backwards (la animación debe tener aplicados los estilos del fotograma inicial antes de empezar), forwards (la animación debe tener los estilos del fotograma aplicados al final), both(se aplica tanto backwards como forwards).

animation-play-state

Con esta propiedad podemos decirle a la animación que se pause (paused) o que se reproduzca (running). Esta propiedad tiene sentido si se combina con algo de JS.

De la misma forma que con las transiciones, podemos tener animaciones múltiples o incluso animaciones en cascada.

<< Transiciones regla @keyframes >>