如何使用css控制动画的播放状态？

可以使用CSS的animation-play-state属性来控制动画的播放状态。

animation-play-state属性有两个值：running和paused。如果设置为running，动画将会继续播放，如果设置为paused，动画将会暂停。

以下是一个例子：

.animation {
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

.animation:hover {
  animation-play-state: paused;
}

@keyframes example {
  from {transform: scale(1);}
  to {transform: scale(2);}
}

在这个例子中，动画默认为running状态，当鼠标移动到元素上时，动画将会暂停，当鼠标离开时，动画将会重新播放。