CSS 无限循环动画

问题

如何使用 CSS 实现一个无限循环的动画效果？

解答

实现 CSS 无限循环动画的关键是使用 animation-iteration-count: infinite 属性。

HTML 结构

<image class="anima" mode="widthFix" src="@/static/1_btn.png"></image>

CSS 样式

.anima {
  animation-name: likes;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes likes {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

属性说明

• animation-name: 指定 @keyframes 动画名称
• animation-duration: 动画完成一次的时间
• animation-timing-function: 动画速度曲线
  • linear: 匀速
  • ease: 先慢再快后慢
  • ease-in: 慢速开始
  • ease-out: 慢速结束
  • ease-in-out: 慢速开始和结束
• animation-delay: 动画延迟开始时间
• animation-iteration-count: 动画播放次数，infinite 表示无限循环
• animation-direction: 动画播放方向
  • normal: 正向播放
  • reverse: 反向播放
  • alternate: 奇数次正向，偶数次反向

关键点

• 设置 animation-iteration-count: infinite 实现无限循环
• 使用 animation-direction: alternate 可以让动画来回播放
• 可以用简写形式：animation: likes 1s linear 0s infinite alternate
• @keyframes 定义动画的起始和结束状态