transition无法实现真实弹跳，因其仅支持a→b两态渐变，而弹跳需压缩、回弹、微震等多阶段力反馈；必须用@keyframes显式定义关键帧，匹配初始状态，配合animation-fill-mode:forwards和cubic-bezier(0.28,0.84,0.42,1)贝塞尔曲线。
弹跳过渡效果不能靠 transition 实现——它只支持两态之间线性或缓动变化，而弹跳必须包含压缩、回弹、微震等非对称多阶段行为，得用 @keyframes + animation。
为什么 transition 无法做出真实弹跳
transition 只能描述“从 A 到 B”的单次渐变，比如 transform: translateY(0) → translateY(100px)。但弹跳不是位移叠加，是力反馈过程：下落→触底压缩→向上回弹→小幅震荡→静止。这些中间态无法用两个端点定义，浏览器也不会自动补出“过冲”或“衰减”。强行用 transition 模拟，只会得到生硬的上下抖动，没有物理感。
@keyframes bounce 必须显式匹配初始 transform 状态
常见错误是元素已有 style="transform: translateY(-20px)"，却在关键帧里写 0% { transform: translateY(0); }，结果动画第一帧直接跳变。正确做法是起始帧完全复刻当前状态：
-
0%帧必须写成transform: translateY(-20px) scale(0.95);（哪怕只是视觉预压） - 否则浏览器会把未声明的
scale当作scale(1)，导致缩放和位移错位 - 如果元素用 JS 动态设过
transform，CSS 关键帧必须覆盖全部子属性，不能只写其中一项
animation-fill-mode: forwards 不加就白写
动画播完后，元素默认恢复到未动画前的 transform 值，而不是停在 100% 帧。这意味着弹完会“啪”地闪回原位。必须加：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
animation-fill-mode: forwards;- 且仅对
animation-iteration-count: 1有效；设成infinite或alternate时它不生效 - 若用了
animation-direction: alternate，终点实际是0%帧，容易卡在压缩态而非自然落地态
cubic-bezier(0.28, 0.84, 0.42, 1) 是弹跳节奏的关键
这个贝塞尔曲线不是玄学——它让动画末段减速更缓，并带轻微过冲，配合关键帧里的负向位移（如 45% 的 translateY(-8px)），才能模拟弹簧回弹。用 ease-out 会收得太急，像突然刹车，毫无余震感。
时长控制在 0.5s–0.7s：短于 0.4s 像抽搐，长于 0.8s 失去“弹”的即时反馈。别和 transition 混用同一属性（如同时对 transform 设两者），CSS 会以 animation 为准，但可能触发渲染冲突。
最容易被忽略的是定位上下文：transform 动画依赖元素自身坐标系，如果父容器是 static 且子元素没设 position，translateY 可能受文档流影响，出现意外偏移。稳妥做法是给动画元素加 position: relative，并确认父级没设 overflow: hidden 裁切弹跳路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
