回弹动画需JS触发并配合弹性贝塞尔曲线：拖动结束时读取实时位移，通过CSS自定义属性动态驱动@keyframes，用forwards保持最终状态，避免内联样式冲突及iOS渲染异常。
用 transform + @keyframes 做回弹动画，本质是「补间 + 弹性缓动」
纯 CSS 无法监听拖动结束事件，所以不能“自动触发”回弹。所谓“拖动结束后回弹”，实际要靠 JS 捕获 dragend 或 mouseup/touchend，再给元素加一个带弹性缓动的 class，让 CSS 动画执行。
关键不在 translate 本身，而在动画的 timing function —— 必须用 cubic-bezier(0.34, 1.56, 0.64, 1) 这类模拟弹簧效果的贝塞尔曲线，原生 ease-out 不够弹。
写一个可复用的回弹动画 class
定义一个固定位移量（比如从 translateX(100px) 回到 translateX(0)）+ 弹性缓动的 keyframes：
@keyframes bounceBack {
0% {
transform: translateX(100px);
}
60% {
transform: translateX(-20px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
.bounce-back {
animation: bounceBack 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
注意点：
立即学习“前端免费学习笔记（深入）”；
-
forwards必须加，否则动画播完会跳回原始位置 - 中间关键帧（60%、80%）手动设反向偏移，比单纯用
cubic-bezier更可控、更像物理回弹 - 位移值（
100px）要和你拖动结束时的实时transform值匹配，否则会错位
JS 触发时必须重置 transform 再加动画 class
如果元素当前已通过 JS 设置了 style.transform = 'translateX(100px)'，直接加 bounce-back class 不会生效 —— 因为内联样式优先级高于 class 中的 transform。
正确做法是：
- 在
dragend里先读取当前getBoundingClientRect()或记录拖动终点坐标 - 把目标位移值动态写入
style.setProperty('--bounce-target', '100px') - 用 CSS 自定义属性驱动动画，避免硬编码
示例（配合上面 keyframes）：
:root {
--bounce-target: 0;
}
.bounce-back-dynamic {
animation: bounceBackDynamic 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes bounceBackDynamic {
0% { transform: translateX(var(--bounce-target)); }
60% { transform: translateX(calc(var(--bounce-target) -0.2)); }
80% { transform: translateX(calc(var(--bounce-target) 0.1)); }
100% { transform: translateX(0); }
}
移动端 touch 拖动容易卡顿？别用 transform 动画叠加
如果拖动过程本身也用 transform 实现（比如监听 touchmove 并实时更新 style.transform），然后立刻在 touchend 加回弹动画，iOS Safari 会出现渲染冲突：动画起始帧取不到最新 transform 值，导致“抽搐”或直接不播。
稳妥方案：
- 拖动中用
requestAnimationFrame更新transform，确保合成层稳定 -
touchend后加setTimeout(() => ..., 0)延迟一帧再加bounce-backclass - 或者改用
will-change: transform提前声明，但仅对频繁动画元素启用，避免滥用
回弹不是加个动画就完事；它依赖拖动状态的准确交接，而这个交接点，恰恰最容易被忽略。
