HTML怎么做摇晃动画_HTML CSS摇晃shake动画效果【汇总】-html教程-PHP中文网

用 CSS 实现 shake 动画需定义 @keyframes shake，使用 transform: translateX() 避免重排，时长 0.6s、timing-function 为 ease-in-out，并设 animation-fill-mode: forwards 防止回弹。

html怎么做摇晃动画_html css摇晃shake动画效果【汇总】

怎么用 CSS 实现 shake 摇晃动画

直接上最常用、兼容性好、不依赖 JS 的方案：@keyframes shake 配合 animation。核心是让元素在水平方向快速来回位移，视觉上产生“被晃动”的错觉。

常见错误是只写 transform: translateX(10px) 却忘了归位，结果元素晃完就偏移了；或者用 left/right 触发重排，性能差。

必须用 transform: translateX()（推荐 ±8px 范围），避免布局抖动
动画时长建议 0.5s–0.7s，太快看不清，太慢像卡顿
加 animation-timing-function: ease-in-out 让起止更自然
别漏写 animation-fill-mode: forwards——否则动画结束后会弹回原位

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  50% { transform: translateX(8px); }
  75% { transform: translateX(-4px); }
}

然后加到元素上：animation: shake 0.6s ease-in-out;

为什么加了 shake 动画但没反应

90% 是这三类问题：选择器没命中、动画名拼错、或被其他样式覆盖。

检查浏览器开发者工具里该元素是否真有 animation 声明（注意大小写：shake ≠ Shake）
确认没有 animation: none 或 display: none / visibility: hidden 拦截了动画
如果用了 will-change: transform，记得加在触发前，否则部分浏览器（如旧版 Safari）可能跳过首帧
Flex 或 Grid 容器中子元素若设了 align-self: center 等，可能抵消 translateX 效果——试试临时改成 align-self: flex-start 排查

如何点击触发 shake 而不是自动播放

关键在于控制 animation 的启停，而不是靠 JS 操作 class 切换（虽然也行，但更重）。纯 CSS 方案更轻量：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

初始状态设 animation: none
给目标元素加一个 class，比如 .shake-trigger，里面写完整动画声明
JS 只负责 element.classList.add('shake-trigger')，再用 setTimeout 在动画结束后 remove（否则下次点不动）

示例 JS 片段：

button.addEventListener('click', () => {
  input.classList.add('shake-trigger');
  setTimeout(() => input.classList.remove('shake-trigger'), 600);
});

注意：600 要和 CSS 中的动画时长严格一致（单位 ms），否则提前删 class 会导致动画中断。

移动端点击 shake 不灵敏或延迟

本质是移动端 click 事件有约 300ms 延迟，而 shake 常用于表单校验反馈，用户感知明显。

优先用 touchstart 替代 click，但注意它不冒泡，得监听到具体元素上
如果用了 FastClick 库，确认它没禁用 touchstart 绑定
iOS Safari 对 transform 动画的渲染帧率较敏感，避免同时触发动画 + 大量 DOM 更新（比如 shake 同时还做 innerHTML 重写）
安卓 WebView 中，若页面缩放比例非 100%，translateX 可能像素对齐异常——加 transform: translateZ(0) 强制 GPU 加速可缓解