CSS 如何在鼠标悬停后在鼠标离开时倒播动画

在本文中，我们将介绍如何使用CSS实现在鼠标悬停时播放动画，然后在鼠标移出时逆向播放动画的效果。

阅读更多：CSS 教程

了解CSS动画

在开始介绍如何实现动画的反向播放之前，我们首先需要了解一些关于CSS动画的基础知识。CSS动画是一种通过在元素的不同帧之间逐渐变化来创建动画效果的方法。通过使用关键帧（keyframes），可以指定在动画的特定百分比位置上要进行的变化和过渡效果。

下面是一个简单的例子，展示了如何使用CSS动画来实现一个元素在鼠标悬停时逐渐变大的效果：

.animated-element {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: transform 0.5s ease;
}

.animated-element:hover {
  transform: scale(1.2);
}

在上面的例子中，我们首先定义了一个名为 .animated-element 的CSS类，设置了元素的初始样式。然后，我们使用 transition 属性指定了动画的持续时间为0.5秒，并采用了一个缓动函数（ease）使动画看起来更加平滑。最后，我们使用 :hover 伪类选择器来定义元素在鼠标悬停时的样式，其中的 transform 属性将元素的尺寸放大了1.2倍，从而实现了一个简单的动画效果。

反向播放动画

要实现在鼠标悬停后在鼠标离开时逆向播放动画的效果，我们可以使用一个扩展的CSS选择器来定义动画的逆向样式。在上面的例子中，我们可以通过增加一个带有 .reverse 类的新样式来定义逆向播放动画的效果：

.animated-element.reverse {
  transform: scale(1);
}

在这个样式中，我们将 transform 属性的值恢复为原始的尺寸，从而使元素在鼠标离开时逆向播放动画。

接下来，我们需要使用JavaScript来切换类，以实现在鼠标悬停和鼠标离开时的动画效果。我们可以使用 mouseover 和 mouseleave 事件来触发类的切换：

const animatedElement = document.querySelector('.animated-element');

animatedElement.addEventListener('mouseover', () => {
  animatedElement.classList.add('reverse');
});

animatedElement.addEventListener('mouseleave', () => {
  animatedElement.classList.remove('reverse');
});

在上面的代码中，我们首先通过 document.querySelector 方法获取到具有 .animated-element 类的元素，并将其存储在 animatedElement 变量中。然后，我们分别为 mouseover 和 mouseleave 事件添加了事件监听器，使用 classList.add 和 classList.remove 方法在适当的时候添加或删除 .reverse 类。

示例应用

为了更好地理解如何实现动画的逆向播放效果，我们可以通过一个具体的示例来说明。假设我们有一个按钮，当鼠标悬停在按钮上时，按钮会逐渐变绿。当鼠标离开按钮时，按钮会逆向变回原来的颜色。

下面是一个基于此示例的完整CSS和JavaScript代码：

.button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  transition: background-color 0.5s ease;
}

.button.reverse {
  background-color: blue;
}

const button = document.querySelector('.button');

button.addEventListener('mouseover', () => {
  button.classList.add('reverse');
});

button.addEventListener('mouseleave', () => {
  button.classList.remove('reverse');
});

在上面的代码中，我们首先定义了一个名为 .button 的CSS类，设置了按钮的样式。然后，我们使用 transition 属性指定了动画的持续时间为0.5秒，并采用了一个缓动函数（ease）使动画看起来更加平滑。最后，我们使用 .reverse 类来定义按钮在鼠标离开时逆向播放动画的样式。

通过将按钮元素的类与 .button 类和 .reverse 类结合起来使用，我们可以实现我们想要的动画效果。