css关键帧中未声明的属性会被重置为初始值而非继承，导致动画跳变；transform须拼接书写以避免覆盖；ios对非整数百分比存在解析误差，应优先使用精确单位和精简关键帧。
关键帧里漏写属性，浏览器不会“继承”而是“重置”
很多人以为在 50% 帧写了 transform: scale(1.2)，那 0% 和 100% 就会自动保持这个值——其实完全相反。CSS 关键帧中**未显式声明的属性，在该帧会被视为 unset**，浏览器不会从上一帧或元素原始样式“延续”，而是直接丢弃、回退到初始计算值（比如 transform: none）。视觉上就是突然缩回原形、位移归零、旋转跳回 0deg。
-
0%写了opacity: 1; transform: translateX(0); -
50%只写了transform: scale(1.2);（漏了opacity和translateX） -
100%又只写了opacity: 0;
结果是：50% 帧时 opacity 突然变成 unset → 计算为 inherit 或 1（取决于上下文），但 translateX 彻底丢失 → 元素瞬间回到 left-top 角；100% 帧时 transform 又变回 none → 缩放和位移全失效。这不是“插值失败”，是属性被主动清空。
为什么用 transform 拼接比分开写更稳
transform 是复合属性，浏览器对它的处理逻辑特殊：同一关键帧内多次声明 transform（比如先写 scale(1.1)，再写 translateX(20px)），后一条会覆盖前一条，最终只生效最后一个。所以必须在同一行用空格拼接：
@keyframes slideScale {
0% { transform: scale(1) translateX(0) rotate(0); }
50% { transform: scale(1.3) translateX(100px) rotate(0); }
100% { transform: scale(1) translateX(100px) rotate(10deg); }
}
这样每帧都完整保留所有变换状态，避免某一项“消失”引发跳变。尤其注意：如果元素原始样式已有 transform: rotateZ(5deg)，而你在 @keyframes 中只写 scale(1.2)，那一动画开始，rotateZ 就没了。
百分比关键帧本身在 iOS 上就有计算误差
iOS WebKit（尤其是 15–16 版本）对 25%、33.333% 这类非整数百分比的解析存在微小偏差，可能算成 24.999%，导致某帧根本没被触发。这不是你写错了，是渲染引擎的已知限制。
- 改用精确像素/视口单位定义位移（如
translateX(-64px)而非translateX(-25%)） - 确保
steps()的步数与实际帧数严格对应（比如雪碧图 4 帧，就用steps(4, end)） - 删掉冗余的中间百分比帧（如只用
0%和100%，靠timing-function控制节奏）
真正稳定的动画，不是靠“多写几帧”，而是每一帧都明确告诉浏览器：“我要什么值”，不给它任何猜测或重置的机会。最容易被忽略的，是以为“没写=保持原样”，实际上“没写=丢掉”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
