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!.
