面试题：CSS关键帧动画：复杂动画的实现与优化

Question

实现一个圆形元素的复杂动画，它要在水平和垂直方向同时做往复运动，同时自身进行360度旋转。动画要有弹性效果，类似弹簧一样的过渡。描述如何通过@keyframes和animation属性实现，并且说明在优化动画性能方面你会采取哪些措施，例如如何减少重排重绘。

Answer 1

1. 使用 @keyframes 和 animation 属性实现动画

1. HTML 部分：

<div class="circle"></div>

2. CSS 部分：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
  animation: complexAnimation 5s ease-in-out infinite;
}

@keyframes complexAnimation {
  0%, 100% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  25% {
    transform: translateX(200px) translateY(0) rotate(90deg);
  }
  50% {
    transform: translateX(200px) translateY(200px) rotate(180deg);
  }
  75% {
    transform: translateX(0) translateY(200px) rotate(270deg);
  }
}

上述代码定义了一个圆形元素，通过 @keyframes 定义了一个名为 complexAnimation 的动画，在这个动画中，圆形元素在 5 秒内完成在水平和垂直方向的往复运动以及 360 度旋转，ease - in - out 让动画有类似弹簧的弹性过渡效果，infinite 使动画无限循环。

2. 优化动画性能措施

1. 使用 will-change 提示浏览器：

.circle {
  will-change: transform;
}

will-change: transform 告诉浏览器元素的 transform 属性即将发生变化，让浏览器提前做好优化准备，提高动画性能。

2. 使用 transform 和 opacity 动画： 尽量使用 transform 和 opacity 进行动画，因为这两个属性不会触发重排重绘。如上面的代码使用 transform 进行位置移动和旋转，避免了直接改变 left、top 等属性触发重排。

3. 硬件加速：

.circle {
  transform: translate3d(0, 0, 0);
}

通过 translate3d 开启硬件加速，浏览器会使用 GPU 来处理动画，提升动画的流畅度。

4. 合理设置动画帧数： 避免设置过高的帧数，过高的帧数并不会显著提升动画的流畅度，反而会增加计算量。如上面设置 5 秒的动画时间，可根据实际效果调整帧数，找到性能和效果的平衡点。

5. 减少 DOM 操作： 在动画过程中，尽量避免对 DOM 结构进行改变。如果动画涉及到 DOM 结构的变化，尽量在动画开始前一次性完成，防止在动画过程中触发重排重绘。