你所不知道的 CSS 动画技巧与细节

1. 利用 transform 属性创建更流畅的动画效果

在 CSS 动画中，transform 属性可以帮助我们创建平移、旋转和缩放效果。不过在使用时，我们还可以借助它的一些细节来让动画更加流畅。

使用 transform: translateZ(0) 增加硬件加速

在移动设备上，我们经常会遇到动画卡顿的问题。这时可以使用 transform: translateZ(0) 来开启硬件加速，从而提高动画性能。

示例代码：

.box {
  transform: translateZ(0);
  animation: move 1s linear infinite;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

使用 transform: scale() 代替 width 和 height 属性

在使用动画改变元素的大小时，我们通常会使用 width 和 height 属性。不过这样会导致元素的宽高重新计算，引起页面回流和重绘，从而影响性能。而使用 transform: scale() 则可避免这个问题。

示例代码：

.box {
  width: 100px;
  height: 100px;
  transform-origin: 0 0;
  animation: scale 1s linear infinite;
}

@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

2. 利用 animation-fill-mode 属性实现更好的动画表现

在 CSS 动画中，animation-fill-mode 属性可以帮助我们指定动画在开始之前和结束之后的状态。这样我们就可以为动画增加更多的变化效果。

使用 animation-fill-mode: forwards 保留结束状态

在默认情况下，动画结束后元素会回到初始状态。而通过设置 animation-fill-mode: forwards，我们可以将元素保留在动画结束时的状态。

示例代码：

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: move 2s linear;
  animation-fill-mode: forwards;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

使用 animation-fill-mode: both 同时保留开始和结束状态

除了保留结束状态外，我们还可以使用 animation-fill-mode: both 同时保留开始和结束状态。

示例代码：

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: color 2s linear;
  animation-fill-mode: both;
}

@keyframes color {
  0% {
    background: red;
  }
  50% {
    background: blue;
  }
  100% {
    background: green;
  }
}