Crea tu primera animación en CSS sin Javascript.

14557

Hola!!
Ahora que haz aprendido lo básico de HTML y CSS, te enseñare a hacer tu primera animación en CSS sin usar Javascript. Esto es posible gracias a la propiedad animation y la función @keyframes que ya viene en CSS.
Para hacer esto utilizaremos Codepen por su rapidez, pero igual puedes usar tu editor de confianza para hacerlo.
Al final del tutorial te dejare el enlace al código en Codepen para que puedas revisarlo.

Primero lo primero.

Conozcamos las propiedades que usaremos.

animation-name: nombre_que_le_quieras_poner;

Con esta propiedad le pondremos nombre al elemento que queramos animar (Es muy importante que le coloques un nombre fácil de recordar).

animation-duration: 4s;

Con esta propiedad determinamos el tiempo que durara la animación.

animation-iteration-count: infinite;

Con esta propiedad determinamos la veces que repetirá la animación, en esta ocasión usaremos el valor infinite pero puedes usar un valor numérico.

@keyframes nombre_del_elemeto{}

dentro de esta función se maneja la animación que haremos.

from {}, to {}

Esto indica el momento del fotograma, en este caso from es el fotograma inicial, y to el fotograma final, ambos equivalen al fotograma 0% y 100%, también puedes incluir otros fotogramas como 50%, 10%, 89% o cualquiera numero siempre que este dentro de 0% o 100%.

Manos a la obra.

Primero crearemos dos contenedores en el HTML de la siguiente forma.

<divclass="animacion">  
    <div></div>
</div>

Bien ahora démosle estilo al contenedor dentro del cual ocurrirá nuestra animacion.

.animacion {  
width: 300px; 
height: 200px;  
background-color: black;
border-radius: 10px;
display:flex;
margin: auto;
align-items: center;
}

Hacemos un circulo

.animaciondiv {
width: 50px;
height: 50px;
background-color: blue;
border-radius: 50%;
}

Le agregamos las propiedades necesarias para crear la animación

.animaciondiv {
 width: 50px;
 height: 50px;
 background-color: blue;
 border-radius: 50%;
 animation-name: circulo;
 animation-iteration-count: infinite;
 animation-duration: 3s;
 }

con esto ya podremos hacer que el elemento pueda ser manipulado con la función @keyframes.

La función @keyframe la utilizamos de la siguiente manera.

@keyframes circulo{
  from {
    margin-left: 250px;
  }
  50%{
    background-color: yellow;
  }
  to{
    margin-left: 0px;
  }
}

Dentro de from indicamos el lugar inicial en donde empezara el movimiento del elemento, 50% es la mitad de la duración de la animación y allí le indicamos que cambie de color durante ese tiempo. Al final to es el momento final de la animación y allí indicamos donde terminara o hasta donde llegara la animación.

Y eso es todo, con estos conocimientos ya podrás empezar a realizar animaciones en css. Puedes empezar a jugar con estas propiedades y explorar que puedes hacer.

Aquí te dejo el código ya terminado en Codepen en caso de que quieras checarlo.

hace 4 años