摇一摇动画是用CSS动画模拟而非陀螺仪，推荐使用animate.css的shakeX类，时长控制在600ms内、位移±8px以内，需用JS控制增删class并监听animationend事件清理状态。
摇一摇动画不是靠手机陀螺仪，而是用 CSS 动画模拟
Bootstrap 本身不提供“摇一摇”动画，也没有内置的 shake 类。你看到的所谓“Bootstrap 摇一摇效果”，实际是用 CSS @keyframes 配合 Bootstrap 的工具类（比如 animate__animated）或自定义 class 实现的视觉抖动。真调用设备陀螺仪属于 JavaScript 层逻辑，和 Bootstrap 无关。
关键点在于：动画触发时机（比如点击按钮后）、抖动幅度与持续时间要克制，否则易引发用户眩晕。建议抖动总时长控制在 600ms 内，位移不超过 ±8px。
用 animate.css 快速接入 shake 效果（推荐）
animate.css 是最常用的第三方动画库，和 Bootstrap 兼容性好，且已预置 shakeX 和 shakeY 动画。别自己写 keyframes —— 容易漏掉 transform: translateZ(0) 导致 Safari 闪屏，也容易忽略 animation-fill-mode: both 造成动画结束后元素跳回原位。
- 通过 CDN 引入：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
- 给抽奖容器加 class：
animate__animated animate__shakeX（注意前缀animate__是 v4+ 强制要求） - 用 JS 控制触发（避免页面加载就动）：
document.getElementById('lottery-btn').addEventListener('click', () => {<br> const el = document.getElementById('prize-box');<br> el.classList.add('animate__animated', 'animate__shakeX');<br> setTimeout(() => {<br> el.classList.remove('animate__animated', 'animate__shakeX');<br> }, 600);<br>});
不用第三方库？手写一个轻量 shake class 也够用
如果项目不允许引入外部 CSS，直接在 <style></style> 或 SCSS 中加一段即可。重点是用 transform: translateX() 而非 margin 或 left，保证硬件加速；同时补上 will-change: transform 提前提示浏览器优化。
@keyframes shake {<br> 0%, 100% { transform: translateX(0); }<br> 25% { transform: translateX(-6px); }<br> 50% { transform: translateX(4px); }<br> 75% { transform: translateX(-2px); }<br>}<br><br>.shake {<br> animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;<br> will-change: transform;<br>}
使用时只需：<div id="prize-box" class="shake">，再配合 JS 切换 class 控制启停。
<h3>摇完之后怎么“定格”显示中奖结果？别忘了重置动画状态</h3>
<p>常见错误：连续点击多次，<code>shake class 叠加导致动画卡顿或失效；或者动画结束没清 class，下次再点没反应。根本原因是 CSS 动画不会自动清除 class，也不支持“中断当前动画立即跳到下一帧”。
- 每次触发前先移除已有动画 class：
el.classList.replace('shake', '')或批量remove() - 用
animationend事件比setTimeout更可靠，尤其在用户切页或系统卡顿时：el.addEventListener('animationend', () => {<br> el.classList.remove('shake');<br>}, { once: true }); - 中奖结果展示建议用独立 DOM 节点（如
<div class="result-text">），不要和动画容器混在一起 —— 否则抖动时文字也会模糊，影响可读性 <p>真正难的不是让盒子晃，而是让晃得自然、停得及时、结果看得清。动画延迟、设备像素比、甚至用户是否开启了“减少运动”系统偏好，都会影响最终观感。上线前务必在 iOS Safari 和 Android Chrome 上实机点十次以上验证。</p> </div>
