Animaciones
A diferencia de las transition (que son simples, de un estado A a un estado B, y necesitan un disparador como :hover), las animation te permiten crear secuencias de animación complejas con múltiples pasos y pueden ejecutarse automáticamente sin necesidad de que el usuario haga nada. Funcionan combinado @keyframes y animation.
- @keyframes: Aquí se definen los "pasos" o "fotogramas clave" de tu animación.
- animation: Aquí indicamos a un elemento que use ese keyframe y cómo debe usarlo (cuánto debe durar, cuántas veces repetirse, etc.).
Animation
Como transition hay una propiedad que engloba todas las propiedades de animation y esta es: animation: <name><duration><timing-function><delay><iteration-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
animation-delay
Esta propiedad nos permite establecer el retardo con el que empezará la animación
animation-iteration-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 (es el valor por defecto, va del 0% al 100% cada vez), reverse (del 100% al 0%), 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 o 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 (no aplica estilos fuera del tiempo de la animación), forwards (El más útil, El elemento se queda con los estilos del último fotograma cuando la animación termina), backwards (El elemento aplica los estilos del primer fotograma antes de que empiece, durante el animation-delay), both(se aplica tanto backwards como forwards).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo de Animaciones CSS</title>
<link rel="stylesheet" href="3.Animaciones2.css">
</head>
<body>
<h1>Ejemplo de Animaciones CSS</h1>
<main>
<div class="box" id="box-pulso">
Pulso Infinito
</div>
<div class="box" id="box-forma">
Cambia Forma (Alterna)
</div>
<div class="box" id="box-temblor">
¡Pasa el ratón!
</div>
<div class="box" id="box-fill-forwards">
Demo 'forwards' (1 vez)
</div>
<div class="box" id="box-fill-backwards">
Demo 'backwards' (Delay 2s)
</div>
</main>
</body>
</html>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.