h5端css动画执行一次后无法重放，本质是浏览器未重置动画状态；可靠方案是js强制重置class、换animation-name或用transform+transition替代@keyframes。

H5端移动端CSS动画执行一次后无法重放，本质是浏览器没重置动画状态，不是uni-app特有问题，而是CSS动画机制本身决定的。

为什么:hover或JS触发的动画在iOS/Android Safari里只动一次

移动端 Safari（尤其 iOS）对 CSS 动画有更强的缓存优化：一旦某个元素完成过 animation，再次触发相同动画类名时，浏览器可能跳过重绘流程，直接复用上一次结果。这不是 bug，是渲染引擎的性能策略。

• 常见现象：.like-btn.active 加了 animation: bounce 0.4s，第一次点击生效，再点就“不动了”
• 根本原因：动画结束后 DOM 的 animation-name 没变，浏览器认为“无需重播”
• uni-app 的 v-if/v-show 切换不解决这个问题——只要 class 名没变，动画上下文就被复用

可靠重置动画的三种实操方式（全平台兼容）

别依赖 animation-iteration-count: infinite，那只是让动画一直循环，不是“每次点击都重新播一次”。要的是可重复、可控制、可中断的单次播放。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 用 JS 强制重置 class：先移除动画类，nextTick 或 setTimeout(..., 0) 后再加回去
  示例：

  triggerAnimation() {<br>  this.$nextTick(() => {<br>    this.isAnimating = false;<br>    this.$nextTick(() => {<br>      this.isAnimating = true;<br>    });<br>  });<br>}

  配合模板：<view :class="{ 'animate-bounce': isAnimating }"></view>
• 换 animation-name：给每次触发分配唯一动画名（如 bounce-1、bounce-2），避免浏览器识别为“同一动画”
  注意：需提前在 CSS 中定义所有变体，或动态插入 style 标签
• 利用 transform + transition 替代 @keyframes：更适合点赞、缩放等简单反馈
  示例：

  .btn {<br>  transform: scale(1);<br>  transition: transform 0.3s ease;<br>}<br>.btn.active {<br>  transform: scale(1.1);<br>}

  每次 toggle active 类都会触发新过渡，天然可重放

uni-app里容易被忽略的坑

很多开发者卡在“明明写了 animation-fill-mode: forwards 却还是回弹”，其实问题不在这里。

• 别在 v-if 元素上直接写动画：H5 端 DOM 销毁重建后，动画状态丢失，但 class 还在，导致“看起来没动”
• 小程序和 H5 对 animation 简写的兼容性不同：H5 支持 animation: name 0.3s，小程序要求显式写出 animation-duration 和 animation-timing-function
• uni-app 的 onShow 不等于页面重载：用户从后台切回来时，onShow 触发，但 DOM 已存在，旧动画状态仍残留，必须手动清理

真正能稳定跨端重放的，永远是可控的 class 切换 + transform + transition 组合；@keyframes 只适合固定节奏、不依赖交互时机的场景。动画是否“重置”，关键不在 CSS 写得多漂亮，而在 JS 是否真正切断了上一次的渲染上下文。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！