CSS动画——fill用法详解，让你的动画更生动

2023-10-03 07:46:40

在CSS动画中，fill属性用于控制动画结束后的状态。默认情况下，动画结束后，动画元素将回到其初始状态。但是，我们可以使用fill属性来改变这种行为，让动画元素在动画结束后保持其最终状态。

fill属性有三个值：

fill-freeze：动画结束后，动画元素保持其最终状态，不会回到其初始状态。
fill-both：动画元素在动画过程中和动画结束后都保持其最终状态。
fill-forwards：动画元素在动画过程中保持其初始状态，但在动画结束后保持其最终状态。

我们来看一个例子。以下代码演示了如何使用fill属性来让动画元素在动画结束后保持其最终状态：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: example 5s infinite;
}

@keyframes example {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100px);
  }
}

在这个例子中，我们创建了一个100px * 100px的红色盒子。当页面加载时，盒子将从左侧移动到右侧。动画结束后，盒子将保持在右侧的位置。这是因为我们使用了fill-forwards值。

fill属性还可以用于创建更复杂的动画效果。例如，我们可以使用fill属性来让动画元素在动画过程中逐渐改变其颜色。

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: example 5s infinite;
}

@keyframes example {
  from {
    transform: translateX(0);
    background-color: red;
  }

  to {
    transform: translateX(100px);
    background-color: blue;
  }
}