本文探讨如何利用JavaScript和CSS变量，实现对CSS动画的精确控制，使其能够响应鼠标的按下和释放事件。通过动态修改关键帧的结束值，可以在鼠标按下时播放特定动画并保持其最终状态，并在鼠标释放时更新动画目标，实现状态的切换。
引言
在网页交互设计中，我们经常需要根据用户的鼠标操作（如点击、按住、释放）来触发不同的视觉反馈。CSS动画提供了一种流畅且高性能的方式来实现这些效果。然而，仅凭纯CSS（如:active伪类）很难实现“按住时播放动画并保持最终状态，释放时播放另一个动画”这种复杂的逻辑。这时，结合JavaScript动态控制CSS变量的能力，可以为CSS动画带来前所未有的灵活性和精确度。
本教程将详细介绍如何通过JavaScript监听鼠标的mousedown和mouseup事件，并利用这些事件来动态修改CSS变量，进而控制CSS动画关键帧的结束状态，从而实现鼠标按住和释放时的不同动画效果。
核心概念：JavaScript与CSS变量的协同
实现这一效果的关键在于CSS变量（Custom Properties）与JavaScript的协同作用。
立即学习“Java免费学习笔记（深入）”；
- 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() { ... });: 当用户在页面的任何位置释放鼠标
