CSS动态控制图片选择

animation本身是具有停止动画和开始动画的属性的
即：animation-play-state
它有2个属性值可以选择（running/paused）分别控制动画的状态，那么我们可以通过绑定动态属性的方式给当前需要旋转的元素添加状态。

html部分

<img
  class="imgTurn: isTurn"
  :style="{ '--isTurn': start ? 'running' : 'paused' }"
/>

2.CSS部分

.imgTurn {
  animation: rotate 6s linear infinite;
  animation-play-state: var(--isTurn);
}
// 图片转动动画
@keyframes rotate {
  0% {
    transform: rotateZ(0deg); /*从0度开始*/
  }
  100% {
	transform: rotateZ(360deg); /*360度结束*/
  }
}