故障抖动动画的核心原理是通过多层文字/图标叠加、微小位移（0.5px–2px）、RGB三通道异步错位及瞬间闪烁模拟数字信号失真，需用伪元素实现分层，避免3D变换引发渲染异常。
故障抖动动画的核心原理是什么
CSS 实现 TikTok 风格的故障抖动（glitch effect），本质不是单纯左右晃动，而是通过多层文字/图标叠加 + 微小位移 + 颜色通道错位 + 瞬间闪烁来模拟数字信号失真。关键点在于：必须用伪元素或额外 DOM 节点承载偏移层，且不能依赖 transform: translateZ() 或 3D 变换——它在部分移动端 Safari 上会触发渲染异常或卡顿。
- 故障感主要来自红、绿、蓝三通道的异步偏移，所以至少需要 3 层（主层 +
::before+::after） - 每层需独立设置
animation-delay和animation-duration，避免同步抖动失去随机感 - 所有偏移量控制在
0.5px～2px之间，超出会显得像 bug 而非设计
如何用纯 CSS 写出可复用的图标抖动类
假设你用的是 SVG 图标（推荐），或一个带 class="tiktok-glitch" 的 <i></i> 元素，直接套用以下结构：
.tiktok-glitch {
position: relative;
display: inline-block;
color: #6941C6; /* 主色 */
}
<p>.tiktok-glitch::before,
.tiktok-glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #EC4A89; /<em> 红通道色 </em>/
clip: rect(44px, 450px, 56px, 430px); /<em> 初始裁剪，防闪 </em>/
animation: glitch-anim 5s infinite linear alternate-reverse;
}</p><p>.tiktok-glitch::after {
color: #17B26A; /<em> 绿通道色 </em>/
animation: glitch-anim2 5s infinite linear alternate-reverse;
}</p><p>@keyframes glitch-anim {
0% { transform: translate(0); }
20% { transform: translate(-1px, 1px); }
40% { transform: translate(-1px, -2px); }
60% { transform: translate(2px, 2px); }
80% { transform: translate(2px, -1px); }
100% { transform: translate(0); }
}</p><p>@keyframes glitch-anim2 {
0% { transform: translate(0); }
15% { transform: translate(1px, 0); }
35% { transform: translate(0, 1px); }
55% { transform: translate(-1px, 0); }
75% { transform: translate(0, -1px); }
100% { transform: translate(0); }
}注意：
-
data-text属性必须显式写在 HTML 中，例如<i class="tiktok-glitch" data-text="T"></i>，否则::before无法取值 -
clip是旧语法，但比clip-path在 iOS 15–16 上兼容性更稳；如需支持更新系统，可改用clip-path: inset(0)并加前缀 - 动画时长设为
5s是为了降低频次——太短（如0.8s）会让眼睛疲劳，且在低帧率设备上容易糊成一片
为什么直接对 SVG 使用 transform 抖动效果差
SVG 元素本身不响应 ::before/::after（除非是 <svg></svg> 外层容器），而对其内部 <path></path> 单独加动画会破坏描边抗锯齿、缩放比例和点击热区。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
利用EchoTik新品排行数据，快速发现TikTok Shop 16个区域的热门新品，适用于TikTok新品排行、热销商品、爆品、短视频电商选品、跨境选品等场景。
- 在
<path></path>上加animation: shake 0.5s→ 抖动生硬，无颜色分离感 - 给整个
<svg></svg>加transform: translateX(2px)→ 图标边缘发虚，尤其在 Retina 屏上 - 用
filter: drop-shadow()模拟偏移 → 阴影模糊，失去故障的“像素级撕裂”感
正确做法是把 SVG 当作背景图或内联 Base64，再用文字层覆盖抖动；或者用 <div class="tiktok-glitch"><svg>...</svg></div> 包裹后，对 .tiktok-glitch 应用上述伪元素方案。
移动端 Safari 的两个隐藏坑
iOS Safari 对 animation-delay 小于 0.1s 的帧调度不准，且在页面后台标签页中可能暂停所有 CSS 动画（包括 infinite 类型），导致回到前台时抖动“卡住”。
解决方案：
- 所有
animation-delay值设为 ≥0.15s，例如glitch-anim延迟0.15s，glitch-anim2延迟0.25s - 加一层 JS 监听
visibilitychange，在页面重获焦点时强制重置动画：el.style.animation = 'none'; setTimeout(() => el.style.animation = '', 10);
另外，iOS 16.4+ 开始限制非用户手势触发的动画播放，如果抖动是页面加载即启动，务必确保容器已插入 DOM 且不在 display: none 状态下初始化。
实际调的时候，最易被忽略的是「抖动节奏」——人眼对 0.3s～0.7s 区间的重复最敏感，超过这个范围就变装饰，低于就变干扰。建议先用 animation-duration: 0.6s 调准感觉，再拉长到正式值。
