如何通过按钮点击触发CSS关键帧，实现水位分步增减动画

现有一个CSS水位波动动画，原本是无限循环状态，需要修改为通过按钮手动切换水位层级：点击“Increase water by a level”按钮提升一级水位，点击“Decrease water by a level”按钮降低一级水位。以下是具体实现方案：

核心思路 #

• 移除原有的无限animation，改用CSS变量存储水位的关键状态（top值和旋转角度），通过JavaScript动态更新变量值。
• 为水位元素添加过渡动画，让层级切换的变化更流畅自然。
• 定义明确的水位层级映射，用变量追踪当前所处层级，点击按钮时切换层级并同步更新样式。

修改后的完整代码 #

HTML #

<div class="water"></div>
<button id="increaseBtn">Increase water by a level</button>
<button id="decreaseBtn">Decrease water by a level</button>

CSS #

.water{
    width:162px;
    height: 162px;
    background-color: #1D89E7;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}
.water:before, .water:after{
    content:'';
    position: absolute;
    width:200%;
    height: 200%;
    top: var(--top, -30%);
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--rotate, 0deg));
    transition: all 0.8s ease-out; /* 添加过渡动画，让切换更平滑 */
}
.water:before{
    border-radius: 45%;
    background:#fff;
}
.water:after{
    border-radius: 35%;
    background:rgba(255, 255, 255, 0.3);
}

JavaScript #

// 定义3个水位层级对应的状态：top值和旋转角度
const waterLevels = [
    { top: '-30%', rotate: '0deg' },    // 层级0：最低水位
    { top: '-60%', rotate: '180deg' },   // 层级1：中间水位
    { top: '-90%', rotate: '360deg' }    // 层级2：最高水位
];

const waterElement = document.querySelector('.water');
const increaseBtn = document.getElementById('increaseBtn');
const decreaseBtn = document.getElementById('decreaseBtn');
let currentLevel = 0; // 默认初始为最低水位

// 更新水位样式的通用函数
function updateWaterLevel() {
    const { top, rotate } = waterLevels[currentLevel];
    waterElement.style.setProperty('--top', top);
    waterElement.style.setProperty('--rotate', rotate);
}

// 绑定提升水位按钮事件
increaseBtn.addEventListener('click', () => {
    if (currentLevel < waterLevels.length - 1) {
        currentLevel++;
        updateWaterLevel();
    }
});

// 绑定降低水位按钮事件
decreaseBtn.addEventListener('click', () => {
    if (currentLevel > 0) {
        currentLevel--;
        updateWaterLevel();
    }
});

// 页面加载时初始化水位
updateWaterLevel();

关键细节说明 #

1. CSS变量替代动画：用--top和--rotate两个变量替代原关键帧中的固定值，摆脱无限循环的束缚，让JS可以精准控制水位状态。
2. 过渡动画优化：给伪元素添加过渡属性，让水位变化时的移动和旋转过程更自然，避免生硬跳转。
3. 层级边界控制：在按钮点击逻辑中加入层级判断，防止水位超出最低或最高的边界范围。
4. 状态映射简化：把原关键帧的5个状态简化为3个有效水位层级，完全匹配“提升/降低一级”的需求。

内容的提问来源于stack exchange，提问作者CoderPE