解开CSS3 animation动画中forwards和both的奥秘：以简单动画为例

前端

2023-12-19 01:53:11

CSS3动画简介

CSS3动画允许我们在网页中创建各种各样的动画效果，如元素的移动、旋转、缩放、颜色变化等。动画的具体实现是通过@keyframes规则来定义关键帧，然后将这些关键帧应用到元素上。

`animation-fill-mode`属性

animation-fill-mode属性用于指定动画在开始和结束时的行为，它有以下几个取值：

none：动画结束后，元素回到初始状态。
forwards：动画结束后，元素保持在动画的最终状态。
backwards：动画开始前，元素保持在动画的初始状态。
both：动画结束后，元素保持在动画的最终状态，动画开始前，元素保持在动画的初始状态。

forwards和both的区别

forwards和both这两个值的区别在于：forwards只在动画结束后起作用，而both在动画开始前和结束后都起作用。

为了更好地理解这两个值的区别，我们来看一个简单的动画示例。

@keyframes example {
  from {
    left: 0;
  }
  to {
    left: 200px;
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  animation: example 1s forwards;
}

在这个示例中，我们定义了一个名为example的动画，该动画将元素从左到右移动200px。然后我们将这个动画应用到一个名为box的元素上。

如果我们给box元素设置animation-fill-mode: forwards;，那么动画结束后，box元素将停留在动画的最终状态，即左移200px的位置。

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes example {
  from {
    left: 0;
  }
  to {
    left: 200px;
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  animation: example 1s forwards;
}
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

如果我们给box元素设置animation-fill-mode: both;，那么动画开始前，box元素将停留在动画的初始状态，即左移0px的位置；动画结束后，box元素将停留在动画的最终状态，即左移200px的位置。

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes example {
  from {
    left: 0;
  }
  to {
    left: 200px;
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  animation: example 1s both;
}
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>