在h5页面中，用@keyframes实现底部抽屉拉手的弹性上下提示动画，核心是采用cubic-bezier(0.34,1.56,0.64,1)等过冲贝塞尔曲线配合位移与微缩放关键帧，在360ms内完成带弹跳感的循环提示。
在 H5 页面中，用 @keyframes 实现底部抽屉拉手的“弹性上下提示动画”，核心是模拟物理中的缓入缓出+轻微过冲（overshoot）效果，让动画看起来有弹跳感，而不是机械地线性移动。
一、关键思路：用 cubic-bezier 模拟弹性曲线
CSS 原生不支持弹簧物理模型，但可通过自定义 cubic-bezier(0.34, 1.56, 0.64, 1) 这类非标准贝塞尔值（y 值 > 1），制造“先超调再回弹”的视觉弹性。这是实现弹性的最轻量方式。
- 避免用
ease-in-out——它太柔和，没有弹跳感 - 推荐弹性缓动函数：
cubic-bezier(0.34, 1.56, 0.64, 1)或cubic-bezier(0.23, 1.15, 0.33, 1.25) - 动画时长建议 300–400ms，太短显得急促，太长失去提示感
二、@keyframes 定义弹跳提示动画
假设拉手是一个高度约 4px、宽 40px 的圆角矩形（常见于底部抽屉），居中固定在底部上方：
@keyframes drawerHandleBounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-8px); /* 向上偏移 */
}
100% {
transform: translateY(0);
}
}
⚠️ 注意：仅靠位移循环不够“弹”。需叠加弹性缓动 + 微小缩放增强真实感：
@keyframes drawerHandleBounce {
0%, 100% {
transform: translateY(0) scale(1);
}
30% {
transform: translateY(-10px) scale(1.04);
}
60% {
transform: translateY(-2px) scale(0.98);
}
80% {
transform: translateY(-1px) scale(1.01);
}
}
三、绑定到拉手元素并自动播放
给拉手 DOM 添加 class，并设置动画参数：
<div class="drawer-handle"></div>
.drawer-handle {
position: absolute;
bottom: 16px;
left: 50%;
width: 40px;
height: 4px;
background: #999;
border-radius: 2px;
transform: translateX(-50%);
<p>/<em> 弹性动画 </em>/
animation: drawerHandleBounce 360ms cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
animation-delay: 0.5s; /<em> 首次延迟半秒，避免页面加载时突兀触发 </em>/
}</p>
-
infinite让提示持续循环（首次使用后可 JS 移除，避免干扰交互） -
animation-delay防止页面刚加载就抖动，提升体验 - 如需“只播一次提示”，去掉
infinite，并在 JS 中控制：element.style.animation = "drawerHandleBounce 360ms ... 1"
四、进阶：配合抽屉状态智能启停
实际项目中，提示动画应在抽屉关闭/半开状态下出现，打开后停止。可用 JS 控制：
// 抽屉关闭时启动提示
if (drawerState === 'closed') {
handleEl.style.animation = "drawerHandleBounce 360ms cubic-bezier(0.34, 1.56, 0.64, 1) infinite";
}
// 抽屉开始拖动或展开时暂停
else {
handleEl.style.animation = "none";
}
也可用 CSS 自定义属性 + :is() / :has()（兼容性注意）做更声明式的控制，但目前主流方案仍以 JS 切换 class 更稳妥。
