CSS CSS在animation-fill-mode: forwards之后的transform和transition在鼠标悬停时无效

在本文中，我们将介绍CSS中的一个问题，即在使用动画属性animation-fill-mode设置为forwards时，鼠标悬停时的transform和transition无效的情况。

阅读更多：CSS 教程

动画属性animation-fill-mode

首先，让我们了解一下animation-fill-mode属性。animation-fill-mode属性用于指定在动画播放之前和之后，动画目标应如何被样式化。它有四个可能的值：

none：在动画播放之前和之后，动画目标不应用任何样式。
forwards：在动画播放结束后，动画目标应该应用动画的最后一个关键帧的样式。这样，动画将停留在最后一个关键帧的状态。
backwards：在动画播放之前，动画目标应该应用动画的第一个关键帧的样式。这样，动画将在播放前呈现出第一个关键帧的状态。
both：动画目标同时应用animation-fill-mode的forwards和backwards效果。

transform和transition在forwards下的问题

在使用animation-fill-mode属性设置为forwards时，动画目标将停留在动画的最后一个关键帧的状态。这意味着，除非鼠标悬停或触发其他事件，否则动画目标将保持在最后一个关键帧的样式中。

然而，这也意味着transform和transition属性不会对鼠标悬停事件做出反应。因为动画停留在最后一个关键帧的样式中，而不是回到初始状态。

解决办法

要解决这个问题，我们可以使用Javascript来添加一个类来触发动画。当鼠标悬停时，我们使用Javascript为目标元素添加一个类，并在动画完成后移除该类。通过这种方式，我们可以确保在鼠标悬停时动画效果仍然起作用。

以下是一个示例的代码，展示了如何使用Javascript来解决这个问题：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      animation-name: example;
      animation-duration: 2s;
      animation-fill-mode: forwards;
    }

    .box.animate {
      animation-name: example-animation;
    }

    @keyframes example {
      0% {background-color: red; transform: scale(1);}
      100% {background-color: blue; transform: scale(2);}
    }

    @keyframes example-animation {
      0% {background-color: red; transform: scale(1);}
      50% {background-color: green; transform: scale(1.5);}
      100% {background-color: yellow; transform: scale(2);}
    }
  </style>
</head>
<body>
  <div class="box"></div>

  <script>
    var box = document.querySelector('.box');

    box.addEventListener('mouseover', function() {
      box.classList.add('animate');
    });

    box.addEventListener('animationend', function() {
      box.classList.remove('animate');
    });
  </script>
</body>
</html>

在上面的示例中，我们定义了一个元素div，并给它添加了一个动画效果。初始时，这个div的背景色为红色，大小为1倍。当动画播放时，背景色变为蓝色，大小变为2倍。我们还定义了一个包含不同关键帧的动画，用于模拟鼠标悬停时的效果。

在Javascript代码中，我们监听了鼠标悬停事件，并在悬停时为元素添加了一个.animate类。动画结束时，我们移除了这个类。通过这种方式，我们可以确保在鼠标悬停时动画效果仍然起作用。