Mejora tus animaciones en hover y en focus

Pequeño truco con CSS para evitar saltos en las animaciones que se activan en hover.

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!

En las redes

¡Únete a la conversación en Twitter! O si te gustó el fragmento y crees que otros deberían leerlo, ¡compártelo!

4 respuestas

  1. Ramón Corominas

    Pull-request: .heart:hover, .heart:focus { 😉

    Ver original

  2. Antonio Laguna ツ

    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

  3. Ramón Corominas

    Yo lo añadiría también en el título, siempre es conveniente darle visibilidad a la accesibilidad con teclado

    Ver original

  4. Antonio Laguna ツ

    Genial apunte ❤️ Actualizado!

    Ver original

Este blog usa menciones webs promovidas por la IndieWeb y usando webmention.io y Bridgy. ¿Has publicado tu propio artículo mencionando a este? ¡Hazme saber la URL!