CSS动画与鼠标事件联动：使用JavaScript和CSS变量实现精确控制_技术教程

本文探讨如何利用JavaScript和CSS变量，实现对CSS动画的精确控制，使其能够响应鼠标的按下和释放事件。通过动态修改关键帧的结束值，可以在鼠标按下时播放特定动画并保持其最终状态，并在鼠标释放时更新动画目标，实现状态的切换。

引言

在网页交互设计中，我们经常需要根据用户的鼠标操作（如点击、按住、释放）来触发不同的视觉反馈。CSS动画提供了一种流畅且高性能的方式来实现这些效果。然而，仅凭纯CSS（如:active伪类）很难实现“按住时播放动画并保持最终状态，释放时播放另一个动画”这种复杂的逻辑。这时，结合JavaScript动态控制CSS变量的能力，可以为CSS动画带来前所未有的灵活性和精确度。

本教程将详细介绍如何通过JavaScript监听鼠标的mousedown和mouseup事件，并利用这些事件来动态修改CSS变量，进而控制CSS动画关键帧的结束状态，从而实现鼠标按住和释放时的不同动画效果。

核心概念：JavaScript与CSS变量的协同

实现这一效果的关键在于CSS变量（Custom Properties）与JavaScript的协同作用。

CSS变量（Custom Properties）：CSS变量允许我们定义可在整个样式表中重复使用的值。更重要的是，它们的值可以通过JavaScript动态读取和修改。
JavaScript动态控制：JavaScript可以监听DOM事件，并在事件发生时通过document.documentElement.style.setProperty()方法来更新根元素（或其他元素）上的CSS变量。
关键帧中的变量引用：CSS @keyframes规则可以引用这些CSS变量。这意味着，当JavaScript更新变量时，动画的关键帧定义也会随之更新，影响动画的播放行为。

通过这种机制，我们可以在JavaScript中根据用户交互逻辑来控制CSS动画的“目标”或“结束状态”，而动画本身的过渡效果依然由CSS负责，保持了性能优势和样式与行为的分离。

实现步骤

我们将创建一个简单的元素，当鼠标按下时旋转45度并保持，当鼠标释放时再旋转回0度。

1. HTML结构

首先，定义一个简单的HTML元素作为动画目标。

2. CSS样式定义

接下来，定义元素的样式和动画规则。

body {
  background-color: #1c1c1c;
}

.animate {
  background-color: white;
  position: relative;
  height: 50px;
  width: 59px;
  animation-name: mousein; /* 应用名为mousein的动画 */
  animation-duration: 0.4s; /* 动画持续时间 */
  animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
}

/* 定义鼠标按下时的动画关键帧 */
@keyframes mousein {
  0% {
    rotate: 0deg; /* 动画开始时旋转0度 */
  }
  100% {
    rotate: var(--mousein); /* 动画结束时旋转到--mousein变量指定的值 */
  }
}

/*
  注意：虽然在原始问题中定义了mouseout关键帧，
  但在本教程的实现方案中，我们通过动态修改--mousein变量来控制mousein动画的反向播放，
  因此mouseout关键帧并非必需，也未被直接应用于.animate元素。
*/

关键点解释：

animation-name: mousein;: 指定元素将播放名为mousein的动画。
animation-duration: 0.4s;: 动画将在0.4秒内完成。
animation-fill-mode: forwards;: 这行代码至关重要。 它确保动画在播放结束后，元素会保持在动画的最终状态，而不是返回到动画开始前的状态。
@keyframes mousein:
- 0% { rotate: 0deg; }: 动画的起始状态，元素旋转0度。
- 100% { rotate: var(--mousein); }: 动画的结束状态。这里的rotate值不再是固定的，而是引用了一个CSS变量--mousein。JavaScript将动态修改这个变量的值，从而改变动画的最终目标。

3. JavaScript逻辑实现

最后，编写JavaScript代码来监听鼠标事件并更新CSS变量。

// 初始设置--mousein变量的值为0度。
// 这确保了在页面加载时，动画的最终目标是0度，即不旋转。
document.documentElement.style.setProperty('--mousein', '0deg');

// 监听全局的mousedown事件
window.addEventListener('mousedown', function() {
  // 当鼠标按下时，将--mousein变量设置为45度。
  // 这会使.animate元素播放mousein动画，从0度旋转到45度。
  document.documentElement.style.setProperty('--mousein', '45deg');
});

// 监听全局的mouseup事件
window.addEventListener('mouseup', function() {
  // 当鼠标释放时，将--mousein变量设置回0度。
  // 这会使.animate元素播放mousein动画，从0度旋转到0度。
  // 由于动画的0%始终是0deg，改变100%目标值并不会立即从当前位置动画回去，
  // 而是为下一次动画播放设置新的目标。
  // 要实现释放时从当前状态动画回0度，通常需要更复杂的逻辑（见注意事项）。
  document.documentElement.style.setProperty('--mousein', '0deg');
});

JavaScript逻辑解释：

document.documentElement.style.setProperty('--mousein', '0deg');: 在页面加载时，为根元素（html>）设置CSS变量--mousein的初始值为0deg。
window.addEventListener('mousedown', function() { ... });: 当用户在页面的任何位置按下鼠标左键时，此事件监听器会被触发。
- document.documentElement.style.setProperty('--mousein', '45deg');: 将--mousein的值更新为45deg。此时，.animate元素的mousein动画会从0deg开始，并在0.4s内旋转到45deg，然后由于animation-fill-mode: forwards而保持在45deg。
window.addEventListener('mouseup', function() { ... });: 当用户在页面的任何位置释放鼠标