5.4.1 动画播放控制

在CSS中，动画播放的控制主要依赖于animation属性和相关的属性，如animation-play-state和animation-direction。

• animation-play-state属性用于控制动画的播放状态，可以设置为running（默认值，动画正常播放）或paused（动画暂停）。
• animation-direction属性用于控制动画的播放方向，可以设置为normal（默认值，动画正常播放）、reverse（动画反向播放）、alternate（动画在正向和反向之间交替播放）或alternate-reverse（动画在反向和正向之间交替播放）。

5.4.2 动画优化

动画优化的目标主要是提高动画的平滑度和性能。以下是一些关键的技术和策略：

• 使用transform替代top、left等属性：对于移动元素，使用transform属性进行位移通常比直接修改top、left等属性更加平滑和高效。
• 尽量使用requestAnimationFrame：requestAnimationFrame函数可以确保动画在每一帧都以最佳状态运行，从而提供最佳的视觉效果。
• 使用CSS过渡（Transitions）和动画（Animations）的timing-function属性：通过调整timing-function属性，可以改变动画的加速度和减速度，从而提供更自然的动画效果。
• 避免使用大量的复杂动画：如果可能，尽量将复杂的动画分解为多个简单的动画，这样可以提高性能并减少浏览器的负担。
• 使用硬件加速：对于3D转换和动画，使用translate3d、rotate3d等函数可以触发硬件加速，从而提高性能。

示例

下面是一个简单的例子，展示如何使用CSS来控制动画的播放状态和方向：

@keyframes example {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.animated {
  animation-name: example;
  animation-duration: 2s;
  animation-play-state: paused; /* 暂停动画 */
  animation-direction: alternate; /* 交替播放 */
}

.animated:hover {
  animation-play-state: running; /* 鼠标悬停时播放动画 */
}

在这个例子中，.animated类定义了一个名为example的动画，动画的时长为2秒，动画的播放状态被设置为暂停，动画的方向被设置为交替播放。当鼠标悬停在.animated元素上时，动画的播放状态被设置为播放。