Animation CSS du cœur battant

Question

Je travaille sur un cœur animé uniquement avec CSS.

Je veux qu'il pulse 2 fois, qu'il fasse une petite pause, puis qu'il recommence.

Ce que j'ai maintenant :

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

Ce que je cherche :

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

Comment puis-je le faire ?

Mon code :

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

Voir aussi ce violon .

Answer 1

Vous pouvez intégrer la pause dans l'animation. Comme ça :

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

Exemple de travail : 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;
}

<div>
Heart
</div>

Edit :

Exemple de travail avec une forme de cœur en CSS pur : https://jsfiddle.net/qLfg2mrd/

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

#heart
{
  position: relative;
  width: 100px;
  height: 90px;
  animation: heartbeat 1s infinite;
}

#heart:before,
#heart:after
{
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 50px 50px 0 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

#heart:after
{
  left: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

<div id="heart"></div>

Answer 2

Essayez ceci. Utilisation de l'animation opacity est un mauvais choix. transform: scale() fera l'affaire.

.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: 150px;
    height: 250px;
    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: 20.3%;
  -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(1);
  }
  5% {
    -webkit-transform: scale(1.2);
  }
  10% {
    -webkit-transform: scale(1.1);
  }
  15% {
    -webkit-transform: scale(1.3);
  }
  50% {
    -webkit-transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@keyframes animateHeart {
  0% {
    transform: scale(1);
  }
  5% {
    transform: scale(1.2);
  }
  10% {
    transform: scale(1.1);
  }
  15% {
    transform: scale(1.3);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
span {
  font-family: 'Cantora One', sans-serif;
  font-size: 64px;
  position: absolute;
  top: 165px;
}

<div class="heart">
</div>

Answer 3

J'aime ketan Mais je voulais améliorer l'animation du cœur pour la rendre plus réaliste.

• Un cœur ne double pas de volume lorsqu'il bat. Une variation de 10 % de la taille me semble préférable.
• J'aime que les deux soient plus grands et plus petits
• Quand il ne bouge plus du tout, il me semble mort. Même quand il ne bat pas, il a besoin de se dilater ou de se contracter un peu.
• J'ai enlevé le code "directions alternatives" pour qu'il fonctionne de la même manière à chaque fois.

• J'ai explicitement le début et la fin du cœur à l'échelle normale (1) et j'ai l'animation au milieu de la séquence. Cela me semble plus clair de cette façon.

  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://goo.gl/nN8Haf" width="100px"> </div>

Answer 4

Sur la base de divers commentaires et en faisant usage de la ♥ nous obtiendrons ceci :

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>

Answer 5

Je pense que c'est ce que vous voulez pour votre animation d'image. Il n'y a pas besoin de l'image du haut. Il suffit d'utiliser l'image du bas.

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