Cómo hacer animaciones en CSS3

Las animaciones CSS son una alternativa más poderosa que las transiciones. En vez de confiar en el secuencia de un estado inicial a un estado final, las animaciones pueden tener cuantos estados se necesiten en medio del estado inicial y el estado final, ofreciendo un mayor control de cómo los estados son animados. Mientras una transición se mueve de un estado A a un estado B, una animación puede moverse de A, B, C a D. O puede tener la cantidad de estados que necesite. Las animaciones pueden lograr este comportamiento utilizando una colección de keyframes. Mientras una transición puede ser especificada con una línea de de código en una clase, una animación requiere un conjunto de keyframes que son descritos separados de la clase.

Para crear animaciones debemos tener dos cosas claras.

1. La regla @keyframes, que incluye los fotogramas de la animación
2. Las propiedades CSS de las animaciones que definen el comportamiento de la misma

Subpropriedades de "Animation"

Sintaxis

div {
/* animation: <name> <duration>
<timing-function> <delay> <iteration-count>
<direction> <fill-mode> <play-state> */
animation: changeColor 5s linear 0.5s 4 normal
forwards running;
}

Los Keyframes / fotogramas

• Cada fotograma indica cómo se muestra cada elemento animado en un momento dado de la animación.
• Keyframe usa percentage para indicar en qué momento de la secuencia la animación tiene lugar. Va de 0% a 100%.
• Utilizamos FROM y TO para especificar al navegador los momentos

Ejemplo 1: desplazar un cuadrado

.cuadrado {
width: 200px;
height: 200px;
background: red;
position: relative;
animation: animacuadrado 5s infinite;
}
@keyframes animacuadrado {
from {left: 0px;}
to {left: 200px;}
}

Ejemplo 2: animar el cuadrado con cambio de colores

@keyframes animacuadrado {
0%   {top: 0px; background: red; width: 200px;}
100% {top: 300px; background: yellow; width: 300px;}
}

Ejemplo 3: cuadrado que se mueve alrededor de la pantalla (4 lados)

@keyframes animacuadrado {
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}

Ejemplo 4 : el cuadrado que rebota / bounce

.cuadrado {
width: 200px;
height:200px;
padding: 20px;
background: red;
position: relative;
animation: animacuadrado 1s ease-in 2s infinite alternate;
}
@keyframes  animacuadrado{
from {
top: 0px;
left: 0px;
}
to {
top: 150px;
left: 150px;
}
}

Ejemplo 5: cuadrado con sombra on hover

.cuadrado {width:100px; height:100px; background:red}
.cuadrado:hover{ animation: bouncing 0.5s cubic-bezier(0.1,0.25,0.1,1) 1s 1 alternate both;} 
@keyframes bouncing{
0% { bottom: 0; box-shadow: 0 0 5px #000;}
100%{ bottom: 50px; box-shadow: 0 50px 50px #000; }
}

Ejemplo 6: cambiamos el background

<div class="fondo"></div>
<style>
html,
body {
height: 100%;
}  
.fondo {
width: 100%;
height: 100%;
animation: pulse 5s infinite;
}
@keyframes pulse {
0% {
background-color: #001F3F;
}
100% {
background-color: #FF4136;
}
}
</style>

Ejemplo 7: cuadrado que se vuelve circulo infinito y se estrecha

<style>
body,
html {
height: 100%;
}  
body {
display: flex;
align-items: center;
justify-content: center;
}
.cuadrado {
height: 250px;
width: 250px;
margin: 0 auto;
background-color: red;
animation-name: stretch;
animation-duration: 1.5s; 
animation-timing-function: ease-out; 
animation-delay: 0;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
@keyframes stretch {
0% {
transform: scale(.3);
background-color: red;
border-radius: 100%;
}
50% {
background-color: orange;
}
100% {
transform: scale(1.5);
background-color: yellow;
}
}  
</style>

Ejemplo 8:  texto slide in

h1 {  
animation-name: slidein;
animation-duration: 3s;
}  
@keyframes slidein {
from {
margin-left: 100%;
width: 300%
}to {  
margin-left: 0%;
width: 100%;
}
}
<h1>Este es mi título</h1>

Ejemplo 9 : el fantasma ;-)

<div class="container">
<img src="ghost.svg" class="ghost" />   
</div>  
<style>
body { background-color: #ff4814; }
.container { position:relative; margin:0 auto; max-width:600px; }
.ghost { animation: float 3s ease-out infinite;  }
@keyframes float { 
50% {
transform: translate(0, 20px); } 
}
</style>

Ejemplo 10 : bola que rebota

body {
display: flex;
justify-content: center;
}.ball {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #FF5722;
animation: bounce 0.5s;
animation-direction: alternate;
animation-timing-function: cubic-bezier(.5,0.05,1,.5);
animation-iteration-count: infinite;
}
@keyframes bounce {
from { transform: translate3d(0, 0, 0);     }
to   { transform: translate3d(0, 200px, 0); }
}
}

Abstract vector created by freepik - www.freepik.com

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 9 years old geek, founder of  @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple  years of website design expertise behind her.  She turns conceptual ideas into highly creative visual digital products.