脉动的心脏 CSS 动画

发布于01月13日

我正在用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>

另请参见this Fiddle.

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

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

脉动的心脏 CSS 动画

推荐答案

Css相关问答推荐

添加Angular 17的Stackblitz项目的Angular material 主题？

需要Angular material 下拉面板有向下和向上箭头按钮

如何使用TailwindCSS溢出？

向左或向右浮动时的不同图像边距

具有不同边框宽度和 colored颜色的边框半径，Safari渲染问题

Css模糊了Chrome中的框边框

将特定样式应用于递归Angular 元素

将鼠标悬停在具有效果的元素上

使用 Vuetify 的 sass 变量时出错

CSS Select 器仅 Select 具有特定类名称的每行的第一个单元格

Nextjs Tailwind Marquee 组件溢出

如何给三角形添加渐变？

在 WooCommerce 变体 Select 中转换属性文本以大写

为什么标题中的特定 div 与 Odoo 13 中 PDF 中的页面重叠？

边框半径 + 背景 colored颜色 == 裁剪边框

twitter-bootstrap：当鼠标悬停在 -tag 中的 btn-group 上时，如何go 掉带下划线的按钮文本？

使用 CSS3 生成重复的六边形图案

了解 Bootstrap 3 中的网格类( col-sm-# 和 col-lg-# )

如何使 window.scrollTo() 效果平滑

CSS(webkit)：在绝对定位元素上用底部覆盖顶部