CSS动画后不复位|极客教程

CSS动画后不复位

在网页开发中，我们经常会使用CSS来添加动画效果，比如让元素平滑地移动、旋转或淡入淡出。然而，有时候我们希望动画完成后元素保持在动画结束的状态，而不是回到原始的状态。这就涉及到了CSS动画后不复位的问题。

什么是CSS动画后不复位？

默认情况下，CSS动画在完成后会回到动画之前的状态，这意味着元素会回到最初设置的样式。例如，假设我们有一个按钮元素，当用户点击按钮时，按钮会变成红色并向右移动。如果我们不指定任何其他属性，点击按钮后动画结束后按钮会回到最初的颜色和位置。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Animation</title>
  <style>
    .button {
      background-color: blue;
      color: white;
      padding: 10px 20px;
      transition: all 0.3s ease;
    }

    .button:hover {
      background-color: red;
      transform: translateX(20px);
    }
  </style>
</head>
<body>
  <button class="button">Click me</button>
</body>
</html>

上面的示例代码中，当用户悬停在按钮上时，按钮会变红并向右移动。但是当动画结束后，按钮会返回到最初的蓝色和位置。

如何实现CSS动画后不复位？

为了实现动画结束后元素保持在动画结束的状态，我们可以使用CSS属性animation-fill-mode。animation-fill-mode属性决定了在动画之前和之后动画是否应用到元素上以及在不触发动画时元素是什么样子。

animation-fill-mode属性有以下几个可能的值：

none：默认值，元素不改变动画执行前的值或执行后的值。
forwards：动画将在结束时保持在最后一个关键帧的状态。
backwards：在播放动画第一帧时，将应用动画动画第一帧的属性值。这样，在显示动画之前就可以在元素上应用样式。
both：向前和向后都应用动画属性。

让我们来修改上面的示例代码，添加animation-fill-mode: forwards;来实现动画结束后按钮保持在红色和向右移动的位置。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Animation</title>
  <style>
    .button {
      background-color: blue;
      color: white;
      padding: 10px 20px;
      transition: all 0.3s ease;
    }

    .button:hover {
      background-color: red;
      transform: translateX(20px);
      animation-fill-mode: forwards;
    }
  </style>
</head>
<body>
  <button class="button">Click me</button>
</body>
</html>

现在，当用户点击按钮后，按钮会变红并向右移动，但动画结束后按钮会保持在红色和向右移动的位置。