脉动

脉动

关注
发信
关注(28)粉丝(399)

脉动CSS动画

本文介绍了脉动CSS动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时删除！！

我只使用CSS来制作动画心脏。



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

我现在所拥有的：

  small ==>大==>小==>重复动画

我要做什么：

  small ==>大==>小==>大==>小==>暂停==>重复动画

我该怎么做？



我的代码：



  #button {width：450px;高度：450像素；位置：相对；上：48px; margin：0自动; text-align：center; } #heart img {位置：绝对；左：0;对：0; margin：0自动; -webkit-transition：不透明性7s缓入； -moz-transition：不透明度7s缓入/缓出； -o-transition：不透明度7s缓进缓出；过渡：不透明度7s缓入；} @keyframes heartFadeInOut {0％{opacity：1; } 14％{不透明度：1; } 28％{opacity：0; } 42％{opacity：0; } 70％{opacity：0; }}＃heart img.top {动画名称：heartFadeInOut;动画定时功能：进出轻松； animation-iteration-count：无限；动画时间：1秒；动画方向：替代；}  
 < div id = 心脏 < img class = bottom src = https://goo.gl/nN8Haf width = 100px> < img class = top src = https://goo.gl/IIW1KE width = 100px>< / div>



另请参见。

解决方案

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

  @关键帧心跳
 {
 0％
 {
转换：scale（.75）; 
} 
 20％
 {
 transform：scale（1）; 
} 
 40％
 {
 transform：scale（.75）; 
} 
 60％
 {
 transform：scale（1）; 
} 
 80％
 {
 transform：scale（.75）; 
} 
 100％
 {
 transform：scale（.75）; 
} 
}

工作示例：



  @keyframes心跳{0％{转换：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;宽度：50像素；高度：50px；动画：心跳1s无限；}  
 < div> Heart< ; / div>



编辑：



具有纯CSS心形的工作示例：



  @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 {职位：相对；宽度：100px；高度：90px；动画：心跳1秒无限；}＃heart：before，＃heart：after {位置：绝对；内容：；左：50px；最高：0;宽度：50像素；高度：80px；背景：红色； -moz-border-radius：50px 50px 0 0; border-radius：50px 50px 0 0; -webkit-transform：旋转（-45deg）; -moz-transform：旋转（-45deg）； -ms-transform：旋转（-45deg）; -o-transform：旋转（-45deg）;变换：旋转（-45度）; -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：旋转（45deg）; -moz-transform：旋转（45deg）； -ms-transform：旋转（45deg）; -o-transform：旋转（45deg）;变换：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>


I`m working on an animated heart only with CSS.

I want it to pulse 2 times, take a small break, and then repeat it again.

What I have now:

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

What I'm going for: 

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

How can I do it?

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

See also this Fiddle.

解决方案

You can incorporate the pause into the animation. Like 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 );
  }
}

Working example: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:

Working example with pure CSS heart shape: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>

这篇关于脉动CSS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..

09-08 09:06
Powered by LMLPHP ©2024 脉动 0.043027