Las animaciones en CSS nos permiten dar un toque de vida a la web o interfaz que estamos haciendo. Mientras las transiciones nos permiten cambiar valores reaccionando a un cambio, las animaciones no necesitan esto.
Por otro lado, las animaciones nos permiten repetirlas en bucle, en yo-yo y hacer cosas más complejas con ellas.
Hay ocasiones en las que queremos que una animación se ejecute en hover. Veamos este corazón por ejemplo:
Hagamos que se anime al hacer hover para que lata como un corazón. El código sería algo así:
.heart:hover,
.heart:focus {
animation: heartbeat 1s infinite;
}
@keyframes heartbeat {
0% {
transform: scale(.75);
}
20% {
transform: scale(1);
}
40% {
transform: scale(.75);
}
60% {
transform: scale(1);
}
80% {
transform: scale(.75);
}
100% {
transform: scale(.75);
}
}
Y este sería el resultado:
No obstante, al quitar el ratón el corazón pega un salto lo cual no es ideal. En este caso puede no ser muy destacable dado que el corazón está dando saltos continuamente pero... ¿y si lo hiciéramos girar?
Aquí el cambio se nota mucho más. En mi experiencia este tipo de animaciones son pequeñas guindas en el pastel pero al quitar el hover perdemos un poco esa magia. El truco que te propongo es el siguiente:
.heart {
animation: rotate-heart 5s linear infinite;
animation-play-state: paused;
}
.heart:hover,
.heart:focus {
animation-play-state: running;
}
Y este es el resultado.
Como puedes ver ahora, el corazón empieza a girar y si quitamos el ratón simplemente se para hasta que volvemos a pasar el ratón por encima.
Actualización
Enlace permanente a “Actualización”Añadido :focus
. La accesibilidad siempre es importante. ¡Gracias a Ramón por su incansable tarea!
4 respuestas
Pull-request: .heart:hover, .heart:focus { 😉
Ver original
De hecho está así en la demo para que funcione en móvil no sé porqué se me pasó en el código! 😅
Ver original
Yo lo añadiría también en el título, siempre es conveniente darle visibilidad a la accesibilidad con teclado
Ver original
Genial apunte ❤️ Actualizado!
Ver original