Crear una flecha animada con CSS y @keyframes
Hoy vamos a crear una pequeña animación utilizando únicamente CSS y @keyframes.
En concreto, vamos a crear una flecha animada que podemos utilizar como indicador visual para invitar al usuario a continuar, descubrir más contenido o desplazarse hacia una determinada sección de nuestra página.
Es un recurso sencillo, pero puede resultar bastante útil cuando queremos llamar la atención sobre un elemento concreto sin recurrir a JavaScript.
Además, al estar realizado completamente con CSS, podemos utilizarlo tanto en escritorio como en dispositivos móviles.
¿Qué vamos a utilizar?
La animación estará realizada completamente con CSS. Para representar la flecha podemos utilizar un icono de una biblioteca como Font Awesome, aunque también podríamos utilizar un carácter, un SVG o incluso dibujarla directamente con CSS.
La estructura de nuestra animación
Antes de empezar con la animación necesitamos un pequeño contenedor.
Su función será simplemente proporcionar un espacio para colocar nuestra flecha:
.flecha-contenedor {
width: 100px;
height: 60px;
margin: 0 auto;
position: relative;
}
No necesitamos hacer nada especialmente complejo. El contenedor nos permite mantener la flecha centrada y disponer de un espacio donde colocarla.
Creando la flecha
Ahora vamos a definir el aspecto de nuestra flecha.
En este ejemplo utilizaremos una clase para controlar el color y otra para aplicar la animación:
.flecha {
display: inline-block;
color: #ffffff;
font-size: 32px;
animation: moverFlecha 1s ease-in-out infinite;
}
Aquí aparece la propiedad importante:
animation: moverFlecha 1s ease-in-out infinite;
Estamos indicando varias cosas:
moverFlecha: nombre de la animación.1s: duración de cada ciclo.ease-in-out: función que controla la aceleración y desaceleración.infinite: la animación se repetirá indefinidamente.
El verdadero protagonista: @keyframes
Ahora llegamos a la parte interesante.
La regla @keyframes nos permite definir los diferentes estados que tendrá un elemento durante una animación.
En nuestro caso queremos que la flecha se desplace ligeramente hacia abajo y vuelva a su posición original.
@keyframes moverFlecha {
0% {
transform: translateY(0);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
Estamos definiendo tres momentos:
- 0%: la flecha comienza en su posición original.
- 50%: la flecha se desplaza 10 píxeles hacia abajo.
- 100%: vuelve a su posición original.
Y como hemos utilizado:
infinite
el navegador vuelve a comenzar la animación cuando llega al 100%.
El resultado es un movimiento continuo de ida y vuelta.
¿Qué hace translateY()?
En el código anterior hemos utilizado:
transform: translateY(10px);
translateY() permite desplazar visualmente un elemento sobre el eje vertical.
Por ejemplo:
translateY(10px);
lo desplaza 10 píxeles hacia abajo.
Mientras que:
translateY(-10px);
lo desplazaría 10 píxeles hacia arriba.
También podríamos utilizar translate() para trabajar simultáneamente con los ejes X e Y, pero en este caso únicamente necesitamos mover la flecha verticalmente.
Montando el HTML
Ya tenemos nuestro CSS. Ahora necesitamos colocar la flecha dentro de nuestro HTML.
Si utilizamos Font Awesome, podemos hacerlo de esta manera:
<div class="flecha-contenedor">
<a href="#ideas" title="Saber más">
<i
class="fa-solid fa-angle-down flecha"
aria-hidden="true"
></i>
<span class="sr-only">Saber más</span>
</a>
</div>
El enlace apunta mediante #ideas a una sección concreta de la página.
Por tanto, si tenemos posteriormente algo como:
<section id="ideas">
<h2>Ideas</h2>
<p>Contenido de nuestra sección...</p>
</section>
al pulsar la flecha el navegador se desplazará hasta dicha sección.
Una versión todavía más sencilla
Si no necesitamos Font Awesome, podemos utilizar directamente un carácter Unicode para representar nuestra flecha.
Por ejemplo:
<div class="flecha-contenedor">
<a href="#ideas" title="Saber más">
↓
</a>
</div>
Y podemos aplicar la animación directamente al enlace:
.flecha-contenedor a {
display: inline-block;
font-size: 32px;
animation: moverFlecha 1s ease-in-out infinite;
}
De esta manera no dependemos de ninguna biblioteca externa para mostrar la flecha.
¿Y si queremos cambiar el comportamiento al pasar el ratón?
En el código original utilizaba :hover para modificar la animación:
.flecha:hover {
animation: arrow 1s ease-out infinite !important;
}
No necesitamos utilizar !important para conseguirlo.
Si queremos que la flecha cambie ligeramente de apariencia al pasar el ratón, podemos hacerlo de forma mucho más sencilla:
.flecha:hover {
color: #229bf4;
}
La animación continuará funcionando y simplemente cambiaremos el color del elemento.
Separar ambas responsabilidades hace que el CSS sea más fácil de mantener.
Una pequeña mejora: accesibilidad
Hay un detalle que conviene tener en cuenta.
Las animaciones constantes pueden resultar molestas para determinados usuarios, por lo que podemos respetar la preferencia del sistema operativo mediante prefers-reduced-motion.
Podemos añadir:
@media (prefers-reduced-motion: reduce) {
.flecha {
animation: none;
}
}
De esta manera, si el usuario ha indicado que prefiere reducir las animaciones, nuestra flecha permanecerá estática.
Es una pequeña mejora, pero actualmente merece la pena tenerla en cuenta cuando añadimos movimiento a una interfaz.
El código completo
Si queremos tener todo el ejemplo junto, podemos dejarlo así:
.flecha-contenedor {
width: 100px;
height: 60px;
margin: 0 auto;
position: relative;
}
.flecha {
display: inline-block;
color: #ffffff;
font-size: 32px;
animation: moverFlecha 1s ease-in-out infinite;
}
.flecha:hover {
color: #229bf4;
}
@keyframes moverFlecha {
0% {
transform: translateY(0);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.flecha {
animation: none;
}
}
Y el HTML:
<div class="flecha-contenedor">
<a href="#ideas" title="Saber más">
<i
class="fa-solid fa-angle-down flecha"
aria-hidden="true"
></i>
<span class="sr-only">Saber más</span>
</a>
</div>
El resultado
Con unas pocas líneas de CSS hemos conseguido crear una animación que:
- Desplaza la flecha verticalmente.
- Repite el movimiento de forma indefinida.
- Utiliza únicamente CSS para la animación.
- Puede utilizarse en escritorio y dispositivos móviles.
- Puede combinarse con un enlace para llevar al usuario a otra sección.
- Respeta la preferencia de reducción de movimiento del usuario.
Conclusión
Las animaciones con @keyframes son una de esas herramientas de CSS que permiten conseguir resultados bastante vistosos sin necesidad de recurrir a JavaScript.
En este caso hemos utilizado un ejemplo muy sencillo: una flecha que se desplaza unos píxeles hacia abajo y vuelve a su posición original.
Pero exactamente el mismo concepto podemos utilizarlo para animar botones, iconos, elementos de navegación, indicadores de carga o prácticamente cualquier elemento de una interfaz.
La clave está en definir los diferentes estados mediante @keyframes y después asociar esa animación al elemento mediante la propiedad animation.
Y lo mejor de todo: no hace falta complicarlo más de la cuenta.
Unas cuantas líneas de CSS pueden ser suficientes para darle bastante más vida a una interfaz.
¡A darle movimiento!
Visitas: 5725
Automation & Data Specialist | Web Development | Data Processing & Integration