前端面试题：使用css实现一个无限循环动画

大叔爱吃猕猴桃

使用css实现一个无限循环动画

想要实现CSS动画的无限循环，其实主要就是要使用animation-iteration-count这个属性，将其设置为infinite，动画就会一直循环播放。

例如：

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

.anima {
  animation-name: likes; // 动画名称
  animation-direction: alternate; // 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
  animation-timing-function: linear; // 动画执行方式，linear：匀速；ease：先慢再快后慢；ease-in：由慢速开始；ease-out：由慢速结束；ease-in-out：由慢速开始和结束；
  animation-delay: 0s; // 动画延迟时间
  animation-iteration-count: infinite; //  动画播放次数，infinite：一直播放
  animation-duration: 1s; // 动画完成时间
}

@keyframes likes {
  0%{
  	transform: scale(1);
  }
  25%{
  	transform: scale(0.9);
  }
  50%{
  	transform: scale(0.85);
  }
  75%{
  	transform: scale(0.9);
  }
  100%{
  	transform: scale(1);
  }
}