Animación CSS Pulsing Heart

83

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

Quiero que suene 2 veces, que me tome un pequeño descanso y luego se repita de nuevo.

Lo que tengo ahora:

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

Lo que voy a buscar: 

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;

}
<div id="heart" >
  <img class="bottom" src="https://goo.gl/nN8Haf" width="100px">
  <img class="top" src="https://goo.gl/IIW1KE" width="100px">
</div>
Expandir fragmento

Vea también este Fiddle .

html css animation Fernando Souza
fuente
3
¿Hay alguna razón por la que haya utilizado jsfiddle en lugar de un Stack Snippet integrado en la pregunta? Por lo que puedo ver, Stack Snippet funciona bien para su ejemplo.
Bakuriu

Respuestas:

117

Puede 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/

Mostrar fragmento de código

Editar:

Ejemplo de trabajo con forma de corazón CSS puro: https://jsfiddle.net/qLfg2mrd/

Mostrar fragmento de código

Rienda
fuente
10
@FernandoSouza También puedes hacer un corazón css sin imagen - jsfiddle.net/qLfg2mrd
Anónimo
1
@Anónimo Gracias por esto. Agregué su enlace a mi respuesta.
Rein
¡Estoy marcando ese Fiddle! Impresionante forma de hacerlo.
David Wilkinson
3
@DavidWilkinson Marque este también como favorito :) - css-tricks.com/examples/ShapesOfCSS :)
Anónimo
6
¿Te refieres al personaje ♥? Eso es fácil, solo hazlo &hearts;. No hay necesidad de todos esos transforms.
Ismael Miguel
35

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

Prueba esto. Optar por la animación opacityes 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;
}
<div class="heart">
</div>
Expandir fragmento

Jinu Kurian
fuente
1
Necesito usar imágenes en lugar de CSS puro, en el proyecto final. ¡Pero gracias! Puedo usar el tiempo de tu animación, ¡que es perfecto!
Fernando Souza
no hacen ninguna diferencia. también puede escalar la imagen de esta manera.
Pruébalo
¿Puedo alternar imágenes o cambiar la imagen de fondo de esta manera?
Fernando Souza
@FernandoSouza sí. Intentalo. Te ayudaré si tienes algún problema.
Jinu Kurian
Lo estoy intentando, pero primero cambiando algo de estructura ya que hay texto en el corazón y debe permanecer en el mismo tamaño.
Fernando Souza
22

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

  • Un corazón no duplica su tamaño cuando late. Me parece mejor un 10% de cambio de tamaño.
  • Me gusta que se haga 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 se ejecute de la misma manera cada vez
  • Explícitamente tengo el inicio del corazón y el final a escala normal (1) y tengo la animación en el 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;
}
<div id="heart" >
  <img class="bottom" src="https://i.stack.imgur.com/iBCpb.png" width="100px">
</div>
Expandir fragmento

Stephen Ostermiller
fuente
6

Basándonos en varios comentarios y haciendo uso de ♥, 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;
}
<div>
  &hearts;
</div>
Expandir fragmento

Tumba.
fuente
6 

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);
  }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HeartBeat Animation</title>
    <link rel="stylesheet" href="Style.css" type="text/css">
  </head>
  <body>
    <div class="center">
      <div class="heart">
        
      </div>
    </div>
  </body>
</html>
Expandir fragmento

Salida

para más: Animación de latidos del corazón

Arpit Soni
fuente
4

Creo que esto es lo que quieres para la animación de tu imagen. No es necesaria la imagen superior. Solo usa bottom.

#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;

}
<div id="heart" >
  <img class="bottom" src="https://goo.gl/nN8Haf" width="100px">
</div>
Expandir fragmento

ketan
fuente
9
¿Tu corazón tiene una arritmia leve en Chrome?
@LegoStormtroopr Así que no soy solo yo. ¿Por qué cromo? ¿Por qué?
Jaca
2
No estoy seguro, podría ser una sínfisis cardíaca sinusal, pero querrá consultar con un experto en CSS para obtener un mejor diagnóstico.
1

Necesitaba esto para un proyecto en el que estaba trabajando. Estaba tratando de que pareciera 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;

Daniel Dewhurst
fuente