Como hacer una imagen animada de un corazón latiendo con CSS?

Hace unos días un amigo me preguntó como aplicarle un efecto de latido a una imagen utilizando CSS dado que estaba en tiempos de renovación y quería darle un lavado de cara a su sitio, así que pensando en algo que tenga que latir, pues claro que mejor que un corazón, una luz lo mío!
Ya vimos como rotar una imagen con efecto rotate, así que ahora veamos como conseguir el efecto de latido e incorporarle también el uso de opacidad para ir variando su transparencia.
Aquí dejó el código CSS que pueden incorporar a su plantilla y el código HTML.

Código CSS

#tamaño_corazon {
position:absolute;
top:80px;
left:60px;
width:300px;
height:275px;
}
#fondo_corazon {
background:#011;
border-radius:200px;
width:400px;
height:400px;
}
#latido {
animation:5s latido infinite;
-webkit-animation:5s latido infinite;
-moz-animation:5s latido infinite;
-o-animation:5s latido infinite;
-ms-animation:5s latido infinite;
width:inherit;
height:inherit;
}
@keyframes latido {
0% {
transform:scale(1);
opacity:1;
}
47% {
transform:scale(1);
opacity:0.7;
}
48% {
transform:scale(0.8);
opacity:0.9;
}
50% {
transform:scale(1.4);
opacity:0.7;
}
52% {
transform:scale(0.8);
opacity:0.9;
}
54% {
transform:scale(1);
opacity:0.7;
}
100% {
transform:scale(1);
opacity:0.9;
}
}
@-webkit-keyframes latido {
0% {
-webkit-transform:scale(1);
opacity:1;
}
47% {
-webkit-transform:scale(1);
opacity:0.7;
}
48% {
-webkit-transform:scale(0.8);
opacity:0.9
}
50% {
-webkit-transform:scale(1.4);
opacity:1;
}
52% {
-webkit-transform:scale(0.8);
opacity:0.9;
}
54% {
-webkit-transform:scale(1);
opacity:0.7;
}
100% {
-webkit-transform:scale(1);
opacity:0.9;
}
}
@-o-keyframes latido {
0% {
-o-transform:scale(1);
opacity:1;
}
47% {
-o-transform:scale(1);
opacity:0.7;
}
48% {
-o-transform:scale(0.8);
opacity:0.9
}
50% {
-o-transform:scale(1.4);
opacity:1;
}
52% {
-o-transform:scale(0.8);
opacity:0.9;
}
54% {
-o-transform:scale(1);
opacity:0.7;
}
100% {
-o-transform:scale(1);
opacity:0.9;
}
}
@-moz-keyframes latido {
0% {
-moz-transform:scale(1);
opacity:1;
}
47% {
-moz-transform:scale(1);
opacity:0.7;
}
48% {
-moz-transform:scale(0.8);
opacity:0.9
}
50% {
-moz-transform:scale(1.4);
opacity:1;
}
52% {
-moz-transform:scale(0.8);
opacity:0.9;
}
54% {
-moz-transform:scale(1);
opacity:0.7;
}
100% {
-moz-transform:scale(1);
opacity:0.9;
}
}
@-ms-keyframes latido {
0% {
-ms-transform:scale(1);
opacity:1;
}
47% {
-ms-transform:scale(1);
opacity:0.7;
}
48% {
-ms-transform:scale(0.8);
opacity:0.9
}
50% {
-ms-transform:scale(1.4);
opacity:1;
}
52% {
-ms-transform:scale(0.8);
opacity:0.9;
}
54% {
-ms-transform:scale(1);
opacity:0.7;
}
100% {
-ms-transform:scale(1);
opacity: 0.9;
}
}

Código HTML

<div id="fondo_corazon">
<span id="tamaño_corazon">
<img id="latido" src="url de la imagen" />
</span>
</div>

A continuación puedes ver como queda el efecto!

El tiempo de latido se puede modificar cambiando en #latido{} el valor 5s en :

animation:5s latido infinite;

Tweet