纯CSS抖动动画应使用transform而非left/top以避免重排，推荐duration为0.4s、iteration-count为1并加forwards，且仅用于校验失败等明确意图场景。
直接用 CSS
+
就能实现，不需要 JS，也不依赖第三方库。关键不是“能不能动”，而是抖动是否自然、是否可控、是否在错误场景下不干扰用户。
抖动动画必须用
，不能靠
/
用
或
移动元素会触发重排（reflow），性能差，尤其在低端设备上容易卡顿甚至掉帧。而
只触发重绘（repaint）或合成（composite），GPU 加速更稳。
错误写法：
+
正确写法：
+
如果同时需要旋转增强真实感，加
，但角度别超过 ±3deg，否则像抽搐
的关键参数怎么配才不翻车
抖动不是越快越好，也不是无限循环最保险。实际项目中，90% 的误用都出在 duration 和 iteration-count 上。
是较稳妥的起点：短于 0.3s 容易看不清，长于 0.6s 显得拖沓
更常用——比如表单校验失败时只抖一次，避免用户盯着晃半天
真要循环，用
或
次就够了；
只适合 loading 状态或装饰性元素
加
能防止动画结束后元素“弹回”原始位置（尤其配合
时）
按钮抖动要绑定在
还是用 JS 控制
取决于触发逻辑：悬停抖动是干扰，点击/校验抖动才是意图明确的反馈。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
—— 不推荐。用户只是路过就抖，没有信息价值，还可能误触
更合理的是 JS 控制：校验失败时给输入框父容器加
类，300ms 后自动移除
示例节选：
注意：CSS 中定义
，别漏掉
，让抖动收尾更干脆
真正难的不是写出抖动，而是判断该不该抖、抖几下、抖完要不要留个视觉锚点（比如边框变红）。这些细节没对齐业务逻辑，动画再酷也是噪音。
@keyframesanimationtransformlefttoplefttoptransform: translate()0% { left: 0; }50% { left: -4px; }0% { transform: translate(0, 0); }50% { transform: translate(-4px, 2px); }rotate()animationanimation-duration: 0.4sanimation-iteration-count: 123infiniteanimation-fill-mode: forwardstranslate:hover.btn:hover { animation: shake 0.5s; }shakeinput.addEventListener('blur', () => {
if (!isValid(input.value)) {
input.parentElement.classList.add('shake');
setTimeout(() => {
input.parentElement.classList.remove('shake');
}, 500);
}
});.shake { animation: shake 0.5s ease-out; }ease-out