你有用过animation-fill-mode属性吗？它有什么应用场景？

animation-fill-mode 属性详解及应用场景

animation-fill-mode 是 CSS 动画中一个非常有用的属性，用于控制动画结束后，元素的最终状态。默认情况下，当 CSS 动画执行完毕后，元素会返回到其原始状态，而 animation-fill-mode 允许你改变这一行为，使得动画结束时元素保持某一特定状态，或者更准确地说，是根据不同的值，控制动画的前后状态。

animation-fill-mode 属性值

animation-fill-mode 有四个可选的值：

• none (默认值)
• forwards
• backwards
• both

1. none

这是 animation-fill-mode 的默认值。当动画执行完毕后，元素会恢复到它在动画开始前的状态。换句话说，动画结束后，元素不受影响。

@keyframes example {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element {
  animation: example 2s;
}

在这个例子中，.element 的透明度会在动画执行时从 0 变为 1，但动画结束后它会恢复到透明度为 0 的状态。

2. forwards

forwards 使得元素在动画结束后，保持动画结束时的状态，即元素会保持动画结束时的样式。

@keyframes example {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element {
  animation: example 2s forwards;
}

在这个例子中，.element 会从透明变为不透明，并且在动画结束后会保持不透明的状态，而不会恢复到透明状态。

3. backwards

backwards 让元素在动画开始前立即应用动画的初始状态，甚至在动画开始之前。通常配合延时动画使用，可以在动画开始前就表现出某种状态。

@keyframes example {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element {
  animation: example 2s backwards;
}

在这个例子中，即使动画尚未开始，.element 在页面加载时会立即变为透明，直到动画开始。它会在动画开始后逐渐变得不透明。

4. both

both 是 forwards 和 backwards 的组合，意味着元素会在动画开始前立即应用动画的初始状态，并在动画结束后保持动画结束时的状态。

@keyframes example {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element {
  animation: example 2s both;
}

在这个例子中，.element 会在动画开始前变为透明，然后在动画结束后保持不透明的状态。

animation-fill-mode 的实际应用场景

1. 创建过渡效果

当需要在动画结束时保持某种样式时，animation-fill-mode: forwards 是非常有用的。例如，想要在页面加载时显示一个淡入效果，动画完成后保持显示的状态。

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element {
  animation: fadeIn 2s forwards;
}

此时，元素会渐渐变得不透明，且保持该状态，而不会恢复到最初的透明状态。

2. 持久化动画效果

在许多场景中，动画不仅仅是为了让用户注意到某个元素，还希望元素在动画结束后持续某种效果。例如，当一个按钮点击后，它变得不可点击，可以通过 animation-fill-mode: forwards 来实现，确保动画结束后，元素仍然保持禁用状态。

@keyframes disableButton {
  from {
    background-color: blue;
  }
  to {
    background-color: gray;
  }
}

button:disabled {
  animation: disableButton 0.5s forwards;
}

此时按钮变为灰色并且保持该状态，用户将无法再次点击。

3. 页面加载时的延迟效果

有时你可能希望元素在页面加载时立即显示动画的初始状态，再等待一定的延迟后开始执行动画。animation-fill-mode: backwards 可以很方便地实现这种效果。

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.element {
  animation: slideIn 2s backwards;
  animation-delay: 1s;
}

在这个例子中，元素在页面加载时会立即位移到屏幕外，等待 1 秒后再进行动画，最后回到正常位置。

4. 触发交互动画效果

animation-fill-mode: both 可以用于交互式动画，例如当用户触发某个事件时，元素可能会有一个过渡效果，并在动画结束后保持某个状态。例如，点击一个按钮时，按钮的背景色改变，并保持该状态，直到页面被刷新或用户进行其他操作。

@keyframes clickEffect {
  from {
    background-color: red;
  }
  to {
    background-color: green;
  }
}

button:active {
  animation: clickEffect 0.3s both;
}

通过 animation-fill-mode: both，按钮点击后，背景色会变化并保持绿色，直到用户的下一次交互。

总结

animation-fill-mode 是控制 CSS 动画的一个强大工具，通过控制动画结束后元素的样式，可以帮助开发者实现更加流畅和细致的动画效果。无论是保持动画结束后的状态，还是在动画开始前立即应用某种状态，animation-fill-mode 都为 CSS 动画提供了更高的灵活性。正确使用该属性，可以让前端动画效果更具交互性和表现力，提升用户体验。