Pulsing Heart CSS-Animation

83

Ich arbeite nur mit CSS an einem animierten Herzen.

Ich möchte, dass es 2 Mal pulsiert, eine kleine Pause macht und es dann noch einmal wiederholt.

Was ich jetzt habe:

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

Was ich will: 

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

Wie kann ich es tun?

Mein 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>
Erweitern Sie das Snippet

Siehe auch diese Geige .

html css animation Fernando Souza
quelle
3
Gibt es einen Grund, warum Sie jsfiddle anstelle eines in die Frage integrierten Stack-Snippets verwendet haben? Soweit ich sehen kann, funktioniert das Stack-Snippet für Ihr Beispiel einwandfrei.
Bakuriu

Antworten:

117

Sie können die Pause in die Animation integrieren. Wie so:

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

Arbeitsbeispiel: https://jsfiddle.net/t7f97kf4/

Code-Snippet anzeigen

Bearbeiten:

Arbeitsbeispiel mit reiner CSS-Herzform: https://jsfiddle.net/qLfg2mrd/

Code-Snippet anzeigen

Zügel
quelle
10
@FernandoSouza Sie können auch CSS-Herz ohne Bild machen - jsfiddle.net/qLfg2mrd
Anonymous
1
@ Anonym Danke dafür. Ich habe Ihren Link zu meiner Antwort hinzugefügt.
Rein
Ich setze ein Lesezeichen für diese Geige! Tolle Art, es zu tun.
David Wilkinson
3
@ DavidWilkinson Lesezeichen auch dieses :) - css-tricks.com/examples/ShapesOfCSS :)
Anonym
6
Du meinst, der ♥ Charakter? Das ist einfach, mach es einfach &hearts;. Keine Notwendigkeit für all diese transforms.
Ismael Miguel
34

Pulsieren Sie zweimal, machen Sie eine kleine Pause und wiederholen Sie sie dann erneut

Versuche dies. Die Animation opacityist eine schlechte Wahl. transform: scale()wird den Job machen.

.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>
Erweitern Sie das Snippet

Jinu Kurian
quelle
1
Ich muss im endgültigen Projekt Bilder anstelle von reinem CSS verwenden. Aber danke! Ich kann das Timing Ihrer Animation verwenden, was perfekt ist!
Fernando Souza
mach keinen Unterschied. Sie können das Bild auch auf diese Weise skalieren.
Probieren Sie es
Kann ich auf diese Weise Bilder abwechseln oder das Hintergrundbild ändern?
Fernando Souza
@ FernandoSouza yup. Versuche es. Ich werde Ihnen helfen, wenn Sie auf ein Problem stoßen.
Jinu Kurian
Ich versuche es, aber zuerst ändere ich eine Struktur, da sich Text auf dem Herzen befindet und er in der gleichen Größe bleiben muss.
Fernando Souza
22

Ich mag Ketans Antwort, aber ich wollte die Herzanimation verbessern, um sie realistischer zu machen.

  • Ein Herz verdoppelt sich nicht, wenn es schlägt. 10% Größenänderung sehen für mich besser aus.
  • Ich mag es, wenn beide größer werden und kleiner wird
  • Wenn es ganz aufhört sich zu bewegen, sieht es für mich tot aus. Selbst wenn es nicht schlägt, muss es sich ein wenig ausdehnen oder zusammenziehen
  • Ich habe den Code "Alternative Richtungen" entfernt, damit er jedes Mal auf die gleiche Weise ausgeführt wird
  • Ich habe explizit das Herzanfangsende und im normalen Maßstab (1) und die Animation in der Mitte der Sequenz. So scheint es mir klarer.

#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>
Erweitern Sie das Snippet

Stephen Ostermiller
quelle
6

Basierend auf verschiedenen Kommentaren und unter Verwendung des ♥ erhalten wir Folgendes:

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>
Erweitern Sie das Snippet

Tom B.
quelle
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>
Erweitern Sie das Snippet

Ausgabe

für mehr: Heart Beating Animation

Arpit Soni
quelle
4

Ich denke, das ist es, was Sie für Ihre Bildanimation wollen. Es ist kein oberes Bild erforderlich. Verwenden Sie einfach unten.

#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>
Erweitern Sie das Snippet

Ketan
quelle
9
Ihr Herz hat eine leichte Arrhythmie auf Chrome?
@ LegoStormtroopr Also bin es nicht nur ich. Warum Chrom? Warum?
Jaca
2
Ich bin nicht sicher, ob es sich um einen Sinus der Herzsymphyse handelt, aber Sie sollten sich bei einem CSS-Experten nach einer besseren Diagnose erkundigen.
1

Ich brauchte das für ein Projekt, an dem ich arbeitete. Ich habe versucht, es so realistisch wie möglich zu gestalten, und das habe ich mir ausgedacht.

@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
quelle