纯CSS抖动动画应使用transform而非left/top以避免重排，推荐duration为0.4s、iteration-count为1并加forwards，且仅用于校验失败等明确意图场景。

直接用 CSS @keyframes + animation 就能实现，不需要 JS，也不依赖第三方库。关键不是“能不能动”，而是抖动是否自然、是否可控、是否在错误场景下不干扰用户。

抖动动画必须用 transform，不能靠 left/top

用 left 或 top 移动元素会触发重排（reflow），性能差，尤其在低端设备上容易卡顿甚至掉帧。而 transform: translate() 只触发重绘（repaint）或合成（composite），GPU 加速更稳。

• 错误写法：0% { left: 0; } + 50% { left: -4px; }
• 正确写法：0% { transform: translate(0, 0); } + 50% { transform: translate(-4px, 2px); }
• 如果同时需要旋转增强真实感，加 rotate()，但角度别超过 ±3deg，否则像抽搐

animation 的关键参数怎么配才不翻车

抖动不是越快越好，也不是无限循环最保险。实际项目中，90% 的误用都出在 duration 和 iteration-count 上。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• animation-duration: 0.4s 是较稳妥的起点：短于 0.3s 容易看不清，长于 0.6s 显得拖沓
• animation-iteration-count: 1 更常用——比如表单校验失败时只抖一次，避免用户盯着晃半天
• 真要循环，用 2 或 3 次就够了；infinite 只适合 loading 状态或装饰性元素
• 加 animation-fill-mode: forwards 能防止动画结束后元素“弹回”原始位置（尤其配合 translate 时）

按钮抖动要绑定在 :hover 还是用 JS 控制

取决于触发逻辑：悬停抖动是干扰，点击/校验抖动才是意图明确的反馈。

立即学习“前端免费学习笔记（深入）”；

• .btn:hover { animation: shake 0.5s; } —— 不推荐。用户只是路过就抖，没有信息价值，还可能误触
• 更合理的是 JS 控制：校验失败时给输入框父容器加 shake 类，300ms 后自动移除
• 示例节选：

  input.addEventListener('blur', () => {
    if (!isValid(input.value)) {
      input.parentElement.classList.add('shake');
      setTimeout(() => {
        input.parentElement.classList.remove('shake');
      }, 500);
    }
  });

• 注意：CSS 中定义 .shake { animation: shake 0.5s ease-out; }，别漏掉 ease-out，让抖动收尾更干脆

真正难的不是写出抖动，而是判断该不该抖、抖几下、抖完要不要留个视觉锚点（比如边框变红）。这些细节没对齐业务逻辑，动画再酷也是噪音。