脉动CSS动画

83

我正在仅使用CSS制作动画心脏。

我希望它脉动2次，稍作休息，然后再次重复。

我现在所拥有的：

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>
展开摘要

另请参见此Fiddle。

html  css  animation 
— 费尔南多·苏扎
source
3
有什么原因为什么您使用jsfiddle而不是问题中集成的Stack Snippet？据我所知，Stack Snippet对于您的示例而言效果很好。
— Bakuriu

Answers:

117

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

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

显示代码段

编辑：

纯CSS心脏形状的工作示例：https： //jsfiddle.net/qLfg2mrd/

显示代码段

— in绳
source
10
@FernandoSouza您也可以使CSS心脏没有图像-jsfiddle.net/qLfg2mrd
— 匿名
1
@Anonymous谢谢你。我已将您的链接添加到我的答案中。
— 赖因
我把那个小提琴加为书签！很棒的方法。
— 大卫·威尔金森
3
@DavidWilkinson也为此添加了一个书签:)- css-tricks.com/examples/ShapesOfCSS :)
— 匿名
6
你的意思是，♥字符？那很容易，那就去做吧&hearts;。不需要所有这些transform。
— Ismael Miguel
35

脉动2次，稍作休息，然后再次重复

试试这个。进行动画处理opacity是一个糟糕的选择。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: 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>
展开摘要

— 基努库里安
source
1
在最终项目中，我需要使用图像而不是纯CSS。但是，谢谢！我可能会使用动画的时间安排，这太完美了！
— Fernando Souza
没关系。您也可以通过这种方式缩放图像。尝试一下:)
— Jinu Kurian
我可以以此方式替换图像或更改背景图像吗？
— Fernando Souza
@FernandoSouza是的。试一下。如果您遇到任何问题，我会为您提供帮助。
— Jinu Kurian
我正在尝试，但是首先要更改一些结构，因为心脏上有文字，并且必须保持相同的大小。
— 费尔南多·索扎
22

我喜欢ketan的答案，但我想改善心脏动画以使其更逼真。

  • 心脏跳动时的大小不会加倍。10％的尺寸变化对我来说看起来更好。
  • 我喜欢它越来越大两小
  • 当它完全停止运动时，对我来说似乎已经死了。即使不跳动，也需要稍微扩张或收缩
  • 我删除了“替代路线”代码，以便每次都以相同的方式运行
  • 我明确地以正常比例（1）设置了心脏起点，并在序列中间设置了动画。这种方式对我来说似乎更清晰。

#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>
展开摘要

— 斯蒂芬·奥斯特米勒
source
6

根据各种评论并利用♥，我们将获得以下信息：

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>
展开摘要

— 汤姆·B
source
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>
展开摘要

输出量

更多信息：心跳动画

— Arpit Soni
source
4

我想这就是您想要的图像动画。不需要顶部图像。只需使用底部。

#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>
展开摘要

— tan丹
source
9
您的Chrome心脏有轻微的心律不齐吗？
@LegoStormtroopr所以，不仅仅是我。为什么要镀铬？为什么？
— 哈卡
2
我不确定，它可能是心脏Symphysis Sinus，但您需要与CSS专家联系以寻求更好的诊断。
1

我正在从事的一个项目需要这个。我试图使它看起来尽可能逼真，这就是我想出的。

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

— 丹尼尔·杜赫斯特
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.