Animación CSS de corazón pulsante

Estoy trabajando en un corazón animado solo con CSS.

Quiero que suene 2 veces, tome un pequeño descanso y luego repítalo nuevamente.

Lo que tengo ahora:

small ==> big ==> small ==> repeat animation 

Lo que estoy buscando:

 small ==> big ==> small ==> big ==> small ==> pause ==> repeat animation 

¿Cómo puedo hacerlo?

Mi código :

 #button{ width:450px; height:450px; position:relative; top:48px; margin:0 auto; text-align:center; } #heart img{ position:absolute; left:0; right:0; margin:0 auto; -webkit-transition: opacity 7s ease-in-out; -moz-transition: opacity 7s ease-in-out; -o-transition: opacity 7s ease-in-out; transition: opacity 7s ease-in-out;} @keyframes heartFadeInOut { 0% { opacity:1; } 14% { opacity:1; } 28% { opacity:0; } 42% { opacity:0; } 70% { opacity:0; } } #heart img.top { animation-name: heartFadeInOut; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 1s; animation-direction: alternate; } 
 

Véase también este violín .

Puedes incorporar la pausa en la animación. Al igual que:

 @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 ); } } 

Ejemplo de trabajo: https://jsfiddle.net/t7f97kf4/

 @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 ); } } div { background-color: red; width: 50px; height: 50px; animation: heartbeat 1s infinite; } 
 
Heart

Pulse 2 veces, tome un pequeño descanso y luego repítalo nuevamente

Prueba esto. Ir con la opacity animación es una mala elección. transform: scale() hará el trabajo.

 .heart:before { display: block; position: absolute; top: 0; left: 0; width: 100%; font-family: 'icons'; font-size: 21px; text-indent: 0; font-variant: normal; line-height: 21px; } .heart { position: relative; width: 500px; overflow: inherit; margin: 50px auto; list-style: none; -webkit-animation: animateHeart 2.5s infinite; animation: animateHeart 2.5s infinite; } .heart:before, .heart:after { position: absolute; content: ''; top: 0; left: 50%; width: 120px; height: 200px; background: red; border-radius: 100px 100px 0 0; -webkit-transform: rotate(-45deg) translateZ(0); transform: rotate(-45deg) translateZ(0); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .heart:after { left: 26%; -webkit-transform: rotate(45deg) translateZ(0); transform: rotate(45deg) translateZ(0); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } @-webkit-keyframes animateHeart { 0% { -webkit-transform: scale(0.8); } 5% { -webkit-transform: scale(0.9); } 10% { -webkit-transform: scale(0.8); } 15% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(0.8); } 100% { -webkit-transform: scale(0.8); } } @keyframes animateHeart { 0% { transform: scale(0.8); } 5% { transform: scale(0.9); } 10% { transform: scale(0.8); } 15% { transform: scale(1); } 50% { transform: scale(0.8); } 100% { transform: scale(0.8); } } span { font-family: 'Cantora One', sans-serif; font-size: 64px; position: absolute; top: 165px; } 
 

Me gusta la respuesta de ketan , pero quería mejorar la animación del corazón para hacerlo más realista.

  • Un corazón no duplica su tamaño cuando late. 10% de cambio en el tamaño me parece mejor.
  • Me gusta cada vez más grande y más pequeño.
  • Cuando deja de moverse por completo, me parece muerto. Incluso cuando no está latiendo, necesita expandirse o contraerse un poco
  • Eliminé el código de “direcciones alternativas” para que funcione de la misma manera cada vez
  • Tengo explícitamente el final del corazón y la escala normal (1) y tengo la animación en medio de la secuencia. Me parece más claro así.
 #heart img{ position:absolute; left:0; right:0; margin:0 auto; } @keyframes heartFadeInOut { 0% {transform: scale(1);} 25% {transform: scale(.97);} 35% {transform: scale(.9);} 45% {transform: scale(1.1);} 55% {transform: scale(.9);} 65% {transform: scale(1.1);} 75% {transform: scale(1.03);} 100% {transform: scale(1);} } #heart img.bottom { animation-name: heartFadeInOut; animation-iteration-count: infinite; animation-duration: 2s; } 
 

Basado en varios comentarios y haciendo uso del ♥ obtendremos esto:

 body { font-size: 40pt; color: red; } @keyframes heartbeat { 0% { font-size: .75em; } 20% { font-size: 1em; } 40% { font-size: .75em; } 60% { font-size: 1em; } 80% { font-size: .75em; } 100% { font-size: .75em; } } div { animation: heartbeat 1s infinite; } 
 

Creo que esto es lo que quieres para tu animación de imagen. No hay necesidad de imagen superior. Solo usa el fondo.

 #button{ width:450px; height:450px; position:relative; top:48px; margin:0 auto; text-align:center; } #heart img{ position:absolute; left:0; right:0; margin:0 auto; } @keyframes heartFadeInOut { 0% { transform: scale( .5 ); } 20% { transform: scale( 1 ); } 40% { transform: scale( .5 ); } 60% { transform: scale( 1 ); } 80% { transform: scale( .5 ); } 100% { transform: scale( .5 ); } } #heart img.bottom { animation-name: heartFadeInOut; animation-iteration-count: infinite; animation-duration: 1.5s; animation-direction: alternate; } 
 
 body{ margin: 0; padding: 0; background: #1f1f1f; } body:before { position: absolute; content: ''; left: 50%; width: 50%; height: 100%; background: rgba(0,0,0,.2); } .center { position: absolute; top:50%; left: 50%; background: #1f1f1f; transform: translate(-50%,-50%); padding: 100px; border: 5px solid white; border-radius: 100%; box-shadow:20px 20px 45px rgba(0,0,0,.4); z-index: 1; overflow: hidden; } .heart { position: relative; width: 100px; height: 100px; background:#ff0036; transform: rotate(45deg) translate(10px,10px); animation: ani 1s linear infinite; } .heart:before { content: ''; width: 100%; height: 100%; background: #ff0036; position: absolute; top:-50%; left:0; border-radius: 50%; } .heart:after { content:''; width: 100%; height: 100%; background: #ff0036; position: absolute; bottom:0; right:50%; border-radius: 50%; } .center:before { content: ''; position: absolute; top:0; left:-50%; width: 100%; height: 100%; background: rgba(0,0,0,.3); } @keyframes ani{ 0%{ transform: rotate(45deg) translate(10px,10px) scale(1); } 25%{ transform: rotate(45deg) translate(10px,10px) scale(1); } 30%{ transform: rotate(45deg) translate(10px,10px) scale(1.4); } 50%{ transform: rotate(45deg) translate(10px,10px) scale(1.2); } 70%{ transform: rotate(45deg) translate(10px,10px) scale(1.4); } 90%{ transform: rotate(45deg) translate(10px,10px) scale(1); } 100%{ transform: rotate(45deg) translate(10px,10px) scale(1); } } 
     HeartBeat Animation    

Necesitaba esto para un proyecto en el que estaba trabajando. Estaba tratando de hacer que se viera lo más realista posible, y esto es lo que se me ocurrió.

 @keyframes heartbeat { 0% { transform: scale( .95 ); } 20% { transform: scale( .97 ); } 30% { transform: scale( .95 ); } 40% { transform: scale( 1 ); } 100% { transform: scale( .95 ); } } 

animation: heartbeat 1s infinite;