pulse html css animation

html - pulse - Animación CSS pulsante del corazón



heartbeat animation css (7)

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

Prueba esto. Ir con 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; }

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

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

Quiero que pulse 2 veces, tome un pequeño descanso y luego lo repita nuevamente.

Lo que tengo ahora:

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

Para qué voy:

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>

Ver también este violín .


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

<div> &hearts; </div>


Creo que esto es lo que quieres para tu animación de imagen. No hay necesidad de una 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; }

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


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. El 10% de cambio de tamaño me parece mejor.
  • 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
  • Tengo explícitamente el inicio del corazón al final y a escala normal (1) y tengo la animación en el medio de la secuencia. Me parece más claro de esa manera.

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


Necesitaba esto para un proyecto en el que estaba trabajando. Intenté 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;


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/

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

Editar:

Ejemplo de trabajo con forma de corazón CSS puro: 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>


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>

Output

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