移动端Web按钮双CSS3动画异常：bulge动画多次触发及抖动问题求助

看起来你的核心问题是两个动画的触发逻辑出现了异常：页面加载时的bulge动画重复触发且伴随抖动，点击时的旋转动画配合表单提交的时机不对。我来拆解一下问题原因，然后给你干净利落的修复方案。

问题根源 #

1. Bulge动画抖动+重复触发：

   • 你的按钮没有设置固定宽高，背景图加载前后元素尺寸会变化，导致浏览器反复重绘重排，动画被意外多次触发；
   • 动画前缀不统一（rotation加了-webkit-但bulge没加），部分浏览器解析时可能出现异常；
   • 直接给按钮初始添加load类，页面渲染过程中元素状态变化可能导致动画重启。

2. 旋转动画触发时机不对：

   • 使用:focus状态触发动画，但表单提交后页面立即刷新，:focus状态的动画往往来不及完整播放；
   • 动画参数设置不合理：0.5s播放20次旋转，总时长10s，页面刷新根本等不到动画完成。

纯CSS优先解决方案 #

修复后的完整代码 #

/* 统一添加浏览器前缀，兼容webkit内核浏览器 */
@-webkit-keyframes bulge {
  0% { -webkit-transform: scale(1); transform: scale(1); }
  20% { -webkit-transform: scale(1.1); transform: scale(1.1); }
  100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes bulge {
  0% { -webkit-transform: scale(1); transform: scale(1); }
  20% { -webkit-transform: scale(1.1); transform: scale(1.1); }
  100% { -webkit-transform: scale(1); transform: scale(1); }
}

@-webkit-keyframes rotation {
  from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes rotation {
  from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/* 按钮基础样式：固定宽高避免背景图加载时抖动 */
button.refresh {
  width: 40px; /* 根据你的背景图实际尺寸调整 */
  height: 40px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  padding: 0;
}

/* 页面加载动画：明确只播放一次，禁止重复触发 */
button.refresh.load {
  -webkit-animation: bulge 0.5s 1 forwards;
  animation: bulge 0.5s 1 forwards;
  -webkit-animation-play-state: running;
  animation-play-state: running;
}

/* 点击触发旋转动画：用:active确保点击瞬间触发，动画一次完成 */
button.refresh:active {
  -webkit-animation: rotation 0.5s 1 linear;
  animation: rotation 0.5s 1 linear;
}

<form method="POST" action="/">
  <button class="refresh load" style="background-image: url('{{ static_url }}img/refresh.png')" type="submit" name="rf" value="1"></button>
</form>

关键修复点 #

• 给按钮设置固定宽高，彻底解决背景图加载导致的布局抖动；
• 统一动画前缀，确保在不同浏览器下表现一致；
• 旋转动画调整为一次360度旋转，时长0.5秒，刚好匹配页面刷新前的视觉反馈；
• 用:active替代:focus触发旋转动画，确保点击按下的瞬间就开始播放，不会被页面刷新打断。

更可靠的JS辅助方案（跨浏览器） #

如果纯CSS方案仍存在动画重复触发的问题，推荐用原生JS控制动画触发时机，避免页面渲染过程中的意外触发：

/* 保留前面的@keyframes和按钮基础样式，修改以下部分 */
button.refresh.load {
  -webkit-animation: bulge 0.5s 1 forwards;
  animation: bulge 0.5s 1 forwards;
}

button.refresh.rotating {
  -webkit-animation: rotation 0.5s 1 linear;
  animation: rotation 0.5s 1 linear;
}

// 页面完全加载后再触发bulge动画，避免渲染过程中重复触发
window.addEventListener('load', () => {
  const refreshBtn = document.querySelector('button.refresh');
  if (refreshBtn) {
    // 先移除类再延迟添加，确保动画从头开始
    refreshBtn.classList.remove('load');
    setTimeout(() => refreshBtn.classList.add('load'), 10);
  }
});

// 点击按钮时先播放旋转动画，再提交表单
document.querySelector('button.refresh').addEventListener('click', (e) => {
  e.preventDefault(); // 阻止默认提交
  const btn = e.target;
  btn.classList.add('rotating');
  
  // 等待动画完成后提交表单
  setTimeout(() => btn.form.submit(), 500);
});

这个方案完全避免了页面渲染阶段的动画异常，同时保证旋转动画完整播放后再刷新页面，体验更流畅。

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