纯 CSS 无法完全复现 iOS 图标长按抖动效果，仅能模拟表层晃动；必须结合 JavaScript 控制触发时机、长按判定（600ms）、中断逻辑及 DOM 动态操作（如插入删除按钮、重排网格）。
用 transform + animation 模拟图标抖动是可行的，但原生 iOS 效果依赖系统级交互反馈，纯 CSS 无法复现完整行为
纯 CSS 可以做出视觉上的左右晃动动画，但 iOS 长按抖动实际包含：触控压力检测、图标缩放+位移+旋转的复合运动、删除按钮渐显、图标间距重排、以及系统级拖拽入口。CSS 只能覆盖其中最表层的「晃动」部分，且必须配合 JavaScript 控制触发时机。
常见错误是直接给所有图标加 animation: shake 0.5s infinite，结果一加载就抖，完全脱离用户长按意图。
- 抖动动画必须由 JavaScript 在
touchstart或mousedown后动态添加 class 触发，不能预设在元素上 - iOS 真实抖动频率约 60Hz，周期短（单次循环 ≈ 0.25s），CSS 动画需匹配节奏，过慢会显得迟滞
- 移动端需同时监听
touchstart和pointerdown，仅用mousedown在 iOS Safari 下无效
@keyframes shake 的关键帧要控制位移量和缓动，避免生硬弹跳
iOS 的抖动不是匀速左右平移，而是带轻微弹性回弹的偏移，起始和结束帧需归零，中间帧用 ease-in-out 或自定义贝塞尔曲线模拟惯性。
示例中 translateX 偏移量建议控制在 ±4px 以内（大屏可到 ±6px），超出易造成布局错位；scale 变化不超过 0.98–1.02，否则像在“呼吸”而非“震动”。
```css
@keyframes shake {
0%, 100% { transform: translateX(0) scale(1); }
25% { transform: translateX(-4px) scale(0.99); }
50% { transform: translateX(4px) scale(1.01); }
75% { transform: translateX(-2px) scale(0.995); }
}
.shaking {
animation: shake 0.25s ease-in-out infinite;
}
```
- 不要用
rotate()—— iOS 图标不旋转，只做微位移+微缩放 - 动画时长设为
0.25s而非0.5s，更贴近真实响应速度 - 必须加
ease-in-out，线性缓动（linear）看起来机械僵硬
必须用 JavaScript 控制「进入抖动态」和「退出抖动态」的时机
长按不是点击，需要防误触：通常 iOS 是 600ms 后才进入编辑态。CSS 动画本身没有延迟启动能力，得靠 JS 计时 + class 切换。
常见错误是监听 click 后立刻加 shaking，结果轻点就抖，体验极差；或忘记清除定时器，导致松手后还在抖。
- 在
touchstart/pointerdown时启动setTimeout，600ms 后添加shakingclass - 在
touchend/pointerup/mouseleave时清除定时器，并移除shakingclass - 需判断是否真正在长按（例如手指未移动超过 10px），否则滑动操作也会误触发
- 桌面端需 fallback 到
mousedown+mouseup，但鼠标无“长按”概念，建议仅限触屏设备启用
删除按钮显示和图标间距重排不能靠 CSS 动画硬撑
很多人试图用 opacity 动画让叉号按钮淡入，但 iOS 实际是按钮从图标右上角「弹出」，伴随轻微缩放和位移。纯 CSS 很难精准还原这个组合动效，且图标网格重排（如留出删除区域）涉及 DOM 重排，CSS 无法驱动。
更现实的做法是：JS 检测进入抖动态后，动态插入一个 ，再用 CSS 控制其初始隐藏、过渡显示；网格重排交给 JS 修改父容器 class，触发 Flex/Grid 重新计算。
- 删除按钮应使用
position: absolute定位在图标右上角，避免影响文档流 - 不要对整个图标容器用
transition: all—— 会导致抖动动画与删除按钮动画互相干扰 - 图标间距重排建议用
grid-template-columns动态修改，比margin更稳定
iOS 桌面的长按抖动本质是系统级手势状态机，CSS 只能描边。真正难点不在动画本身，而在如何用 JS 精准模拟长按判定、中断逻辑、多点触摸容错——这些细节漏掉一个，效果就变成“抽搐”而不是“抖动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
