[CSS] Crear una flecha animada con CSS3

Tiempo de lectura estimado: 2 minutos

Hoy vamos a crear una animación con CSS3 usando keyframes. En concreto una flecha animada que inste al usuario a pinchar sin tener que hacer scroll. Válido para móviles también.

En el caso en concreto, vamos a animar una flecha usando los iconos de Font Awesome.

Visto el ejemplo, vamos a proceder a crear nuestra sencilla animación.

Lo primero que vamos a hacer es crear el contenedor donde estará nuestra animación:

.elemento{
width: 100px;
height: 50px;
margin:0 auto;
position: relative;
}

Este contenedor será el que almacenará nuestra animada flecha. Vamos a crear ahora los estilos para nuestra flecha y por último , la animación usando keyframes.

.animatedColor {
color: white;
}

.flecha {
animation: arrow 1s ease-in-out infinite;
font-size:20px;

}

.flecha:hover{
animation:arrow 1s ease-out infinite !important;
color:#229bf4;
}

Sencillito , verdad?.

Vamos a la parte interesante. El uso de los keyframes para poder darle vidilla.

@keyframes arrow {
0% {
transform: translate(0px, 50px);
}

50% {
transform: translate(0px, 60px);
}

100% {
transform: translate(0px, 50px);
}
}

Definimos los keyframes y el nombre que nosotros queramos. En este caso , arrow. Si os fijáis en el código de arriba veréis que en la propiedad animation de nuestra flecha, llamamos a “arrow”. Definimos 3 estados : 0 , 50% y 100%. Y usamos la propiedad transform: translate (x,y).

Ahora , en nuestro HTML , construiremos todo lo que tenemos en CSS para que el resultado sea el esperado.

<div class="elemento">
<a title="Saber más!" class="menuPpal suavizado" href="#ideas"><i class="fa fa-angle-down fa-2x flecha animatedColor" aria-hidden="true"></i> </a>
</div>

Y con esto ya tendríamos nuestra flecha animada en funcionamiento.

Gracias a CSS3 podemos dar rienda suelta a nuestra imaginación y hacer cosas espectaculares. Así que ya no hay excusas para darle dinamismo a vuestros sitios.

Un saludo!.