Animación de corazón CSS3 usando keyframe
En diciembre del año pasado aprendí esta técnica viendo el blog de Lea Verou en un contenido titulado «CSS Animations with only one keyframe«, la cual he usado para animar iconos realizados con tipografía(si te interesa esta técnica te recomiendo ver estas iconografias en fuentes), pero no me había dado tiempo de compartirla, y creo que la fecha se presta para esto, sin mas dejo el ejemplo:
¿Como funciona? Breve explicación
Tratare de explicar el funcionamiento de esta animación aunque en trucos-CSS lo explican a mejor detalle. Lo primero que se hace es definir una animación la cual tiene la siguiente estructura CSS:
@keyframes latidos {
from { transform: none; }
50% { transform: scale(1.4); }
to { transform: none; }
}
Aquí estamos definiendo una animación la cual tiene el nombre de latidos, esta la vamos a instanciar(fijar) en algún elemento de nuestro código CSS, como se muestra a continuación:
.corazon {
display: inline-block;
font-size: 150px;
text-shadow: 0 0 10px #222,1px 1px 0 #450505;
color: red;
animation: latidos .5s infinite;
transform-origin: center;
}
Con esto estamos indicando que la animación(latidos) definida previamente va a ser ejecutada cada 0.5 segundos en un ciclo infinito sobre los elementos que pertenezcan a la clase corazon.
Finalmente solo faltaría definir algún elemento HTML con la clase corazon como se muestra en el siguiente código HTML:
<div class="corazon">♥</div>
El código ♥ contenido dentro del div con la clase corazon es el carácter con el símbolo de un corazón (♥), el cual tendrá el estilo de la clase corazon y estará animado por la definición de latidos.
Bien, espero te sirva de algo! y asta luego.
About Author
Gracias me fui muy util