H5红包倒计时需用@keyframes实现数字跳动与警示红光双动画：数字用scale缩放模拟弹跳，红光用box-shadow渐变营造呼吸式警示效果，并通过JS动态切换class精准触发动画重播。
在 H5 页面中实现红包倒计时数字跳动 + 警示红光动画，核心是用 @keyframes 分别控制两个视觉层：数字本身的“跳动”（缩放/位移）和背景/边框的“红光闪烁”（颜色与透明度变化），再通过 animation 同时应用到同一元素（如倒计时数字容器）上。
1. 数字跳动动画（轻微弹跳感）
模拟数字更新时的轻量反馈，避免生硬切换。推荐用 scale 和 transform 配合 ease-out 实现自然回弹：
@keyframes numberBounce {
0% { transform: scale(1); }
50% { transform: scale(1.12); } /* 稍微放大 */
100% { transform: scale(1); }
}使用时给数字容器（如 <span class="countdown-digit">5</span>）添加：
.countdown-digit {
display: inline-block;
animation: numberBounce 0.3s ease-out;
/* 触发重播需动态修改 animation-name 或 keyframe 名（见下文） */
}2. 警示红光动画（呼吸式红光）
强调紧迫感，用红色渐变+半透明白光叠加，营造“警示灯”效果。关键点：不只改 color，要作用于 box-shadow 或 background 才有光晕感：
@keyframes redPulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.4);
}
70% {
box-shadow: 0 0 0 12px rgba(255, 69, 0, 0);
}
}搭配使用（可叠加在同一个元素上）：
.countdown-digit {
animation:
numberBounce 0.3s ease-out,
redPulse 1.8s infinite;
}3. 倒计时中精准触发动画（关键技巧）
数字每秒变化一次，但 CSS 动画默认不会因 textContent 改变而重播。必须手动重置动画状态：
- 方法一（推荐）：每次更新数字时，临时移除再添加 class
- 方法二：用 JS 修改
animation-name加时间戳后缀强制刷新 - 方法三（简洁）：利用
animation-play-state暂停后立即播放
示例（方法一）：
function updateCountdown(num) {
const el = document.querySelector('.countdown-digit');
el.textContent = num;
el.classList.remove('animate');
// 强制重排，确保移除生效
void el.offsetWidth;
el.classList.add('animate');
}
<p>/<em> CSS 中定义 </em>/
.animate {
animation: numberBounce 0.3s ease-out, redPulse 1.8s infinite;
}4. 优化细节提升真实感
避免机械重复，让动画更符合“红包倒计时”的节日语境：
- 最后 3 秒加快红光频率（如把
redPulseduration 缩至0.8s） - 数字跳动在最后 1 秒增加震动幅度（加
translateX微偏移） - 用
will-change: transform提升动画性能 - 确保红光色值用暖红（如
#ff4500）而非冷红（#ff0000），更贴近红包质感
