移动端左右滑动手势引导需JS监听touch事件，CSS仅通过@keyframes实现方向明确、轻微循环位移的视觉提示（如translateX±6px+scale），动画时长1.2s、ease-in-out、will-change优化，touchstart时停、touchend后可恢复。
移动端左右滑动手势引导，不能靠纯 CSS 检测手势（touchstart/touchmove 必须用 JS），但可以用 CSS @keyframes 配合 JS 控制的 class 切换来「视觉提示」——告诉用户“这里可以左右滑”。关键不是模拟手势，而是降低认知成本。
为什么不能只用 @keyframes 实现真实滑动
CSS 动画本身不感知手指位移，animation 只能预设路径。所谓“手势引导”，本质是：用户还没滑时，先给一个动态提示（比如箭头晃动、元素微移），暗示可交互；滑动开始后，再由 JS 更新状态，CSS 负责过渡反馈。
- 纯 CSS 无法读取
touchmove的clientX偏移量，所以做不到“跟随手指拖拽” -
transform: translateX()动画可以做流畅位移，但起始/结束值必须提前写死，不能实时响应 - 真·手势驱动的滑动（如轮播图）必须用 JS 监听事件 + 动态设置
style.transform
@keyframes 提示动画该怎么做才有效
目标不是炫技，是让用户在 1 秒内理解“向左/右滑有反应”。推荐用轻微、重复、方向明确的位移动画，避免 opacity 闪烁（移动端易误判为加载中）。
- 用
transform: translateX(-8px) → translateX(0) → translateX(8px)循环，比left更稳且不触发重排 - 动画时长设
1.2s，animation-timing-function: ease-in-out，太慢像卡顿，太快看不清方向 - 加
will-change: transform（仅对正在动画的元素），尤其在 iOS Safari 上能减少闪动 - 别用
opacity: 0 → 1，人眼对位移比明暗更敏感；若需强调，叠加scale(0.98) → scale(1)
示例：
立即学习“前端免费学习笔记（深入）”；
@keyframes hintSlide {
0% { transform: translateX(-6px) scale(0.98); }
50% { transform: translateX(0) scale(1); }
100% { transform: translateX(6px) scale(0.98); }
}
.hint-arrow {
animation: hintSlide 1.2s ease-in-out infinite;
will-change: transform;
}
JS 如何配合启动/暂停提示动画
动画不能一直跑——用户开始滑动时得停，滑完释放后可恢复。靠切换 class 最轻量，避免直接操作 style.animationPlayState。
- 初始状态加
class="hint-active"启动动画 - 监听
touchstart立即移除该 class：el.classList.remove('hint-active') - 监听
touchend且判定未触发实际滑动（如位移 el.classList.add('hint-active') - 注意：不要在
touchmove中反复增删 class，会抖动；只在起点和终点控制
移动端容易被忽略的坑
看似简单，但在 iOS 和部分 Android WebView 里，几个细节会让提示失效或卡顿：
- 父容器没设
overflow: visible或留白，translateX(8px)被裁剪，动画“一半消失” - 用了
position: absolute+left动画，又同时写了transform，后者会覆盖前者，位移不动 -
animation-duration设成2s以上，在低端安卓机上可能掉帧，建议 ≤1.5s - 多个提示元素同时动画，没控制
will-change的生命周期，内存暴涨导致页面卡死
最麻烦的是：动画停了，但用户没意识到要滑——所以提示位置必须紧贴可滑区域边缘（比如轮播图右侧加右箭头，且箭头本身带 hintSlide 动画），而不是放在中间弹个 toast。
