HTML怎么做弹跳动画_html元素弹跳bounce动画实现【快速上手】-html教程-PHP中文网

用@keyframes bounce定义弹跳关键帧：0% translatey(-30px)，50%到0，75%回弹至-10px，100%落定；配合cubic-bezier(0.28, 0.84, 0.42, 1)实现重力回弹感，并设animation-fill-mode: forwards使动画结束停留最终位置。

html怎么做弹跳动画_html元素弹跳bounce动画实现【快速上手】

直接用 CSS 的 @keyframes 配合 animation 就能实现干净利落的弹跳效果，不需要 JS，也不依赖第三方库。

怎么写 bounce 关键帧？

弹跳的核心是模拟重力回弹：先快速下落，再多次幅度递减的反弹。CSS 里用 cubic-bezier() 比用 ease-in-out 更精准——它能控制速度曲线的“弹感”。

0.28, 0.84, 0.42, 1 是最常用的一组 bounce 曲线值，比默认 ease 更有物理感
如果想更夸张，可试 0.34, 1.56, 0.64, 1（注意第二个值 >1，允许“过冲”）
关键帧本身只需定义 transform: translateY()，避免触发布局重排（top 或 margin 会）

@keyframes bounce {
  0% { transform: translateY(-30px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.element { animation: bounce 0.6s cubic-bezier(0.28, 0.84, 0.42, 1); }

为什么加 `animation-fill-mode: forwards`？

不加的话，动画播完会瞬间“弹回”初始位置——因为 transform 只在动画期间生效。加了 forwards 才能让元素停在最后一帧的状态（比如落到目标位置）。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

只对单次播放有效；如果是循环动画（infinite），forwards 无意义
若同时用了 transform 初始样式（如 transform: translateY(-20px)），要确保关键帧起始值和它一致，否则会有跳变
别和 animation-direction: alternate 混用，容易让终点状态不可控

移动端点按触发弹跳总失效？

常见原因是 Safari 和部分安卓浏览器对未绑定交互事件的元素禁用 :active 状态，导致伪类触发失败。别用 :hover 或 :active 直接触发动画。

改用 JS 添加 class 触发：element.classList.add('is-bouncing')，然后用 .is-bouncing { animation: bounce ... }
确保元素有 cursor: pointer 和 touch-action: manipulation，减少 iOS 300ms 延迟干扰
如果用 click 事件，记得加 event.preventDefault() 防止表单默认行为打断动画流