不支持 @keyframes 的浏览器会完全忽略动画，无降级、无报错、无 fallback；可靠检测需用临时元素+computed样式；transition 仅适用于两态切换，JS 降级用于复杂动画，推荐 @supports 分层控制。
不支持 @keyframes 的浏览器会怎样
老版 IE（IE9 及以下）、Android 4.3 之前的 WebView、部分国产双核浏览器的兼容模式，压根不解析 @keyframes 规则，连带 animation 属性也会被直接忽略——不是卡顿或掉帧，是「完全没反应」。CSS 动画不会 fallback 到 transition，也不会报错，页面就静止在那里。
常见错误现象：animation: slideIn 0.3s ease; 写了但元素一动不动；开发者工具里能看到样式声明，但 computed 面板中 animation 值显示为 none 或空。
- 别依赖 CSS 动画做关键交互反馈（比如按钮点击后的状态确认），否则低版本用户会以为操作没生效
- 用
getComputedStyle(el).animationName在运行时检测并不靠谱——IE9 会报错，Chrome 旧版可能返回""即使动画在跑 - 真正可靠的检测方式是：创建一个带
@keyframes的临时元素，插入 DOM 后读取其animationName计算值是否为预期名称
transition 能不能当 animation 的降级方案
能，但有硬限制：transition 只响应属性变化（比如 class 切换、style 修改），无法实现多关键帧、循环、方向反转等 @keyframes 特性。它适合「进入/离开」这类两态切换，不适合 loading 微动效或路径动画。
使用场景举例：模态框淡入、下拉菜单展开、Tab 页签切换——这些都可以用 opacity + transform transition 平滑替代。
- 必须确保触发 transition 的属性是可过渡的，比如
display不行，visibility也不行；优先选opacity、transform、color - transition 时间要和原 animation 时长对齐，否则降级后节奏突兀；建议统一用变量控制，例如
--anim-duration: 0.25s;，在animation和transition中都引用 - IE10+ 支持
transform过渡，但需要加-ms-前缀；Android 4.0–4.3 对transform过渡支持不稳定，建议加will-change: transform;提前提示渲染层
JavaScript 降级：什么时候该上 JS 补位
当必须实现循环动画（如旋转图标）、逐帧控制（如打字效果）、或依赖数据驱动的动态时序（如图表绘制）时，CSS 动画降级到 transition 就不够用了，得靠 JS 控制 requestAnimationFrame 或定时器。
注意：JS 动画不是“更高级”，而是“更可控但也更重”。在低端 Android 设备上，setInterval 驱动的动画容易丢帧，而 requestAnimationFrame 在页面不可见时会被暂停——这反而可能破坏你想要的后台轮播逻辑。
- 避免在每个动画帧里反复调用
getBoundingClientRect()或读写style，会强制同步布局，卡顿明显 - 用
element.animate()（Web Animations API）比手写 rAF 更简洁，但注意 Safari 16.4 之前不支持 fill-mode 或 iterationComposite，降级时需检查'animate' in Element.prototype - 如果只针对 IE9–10，用 jQuery
.animate()仍是最省心的选择，它内部做了属性映射和队列管理，但体积代价要算进去
实际项目中怎么组织降级代码
别写三套并行样式（CSS 动画 / transition / JS），维护成本爆炸。核心思路是：CSS 写默认动画，用现代特性兜底；JS 只负责探测 + 加载降级逻辑，且仅在必要时激活。
推荐结构：
/* 基础样式，所有浏览器都加载 */
.box { opacity: 0; }
/* 现代浏览器执行动画 */
@supports (animation-name: test) {
.box { animation: fadeIn 0.3s forwards; }
}
/* 无 animation 但支持 transition 的浏览器 */
@supports (transition: opacity 0.3s) and (not (animation-name: test)) {
.box.active { opacity: 1; transition: opacity 0.3s; }
}
关键点在于 @supports 的嵌套条件判断——它比 JS 检测更轻量，且能被 CSS 预处理器静态处理。但注意：IE 不支持 @supports，所以这段规则本身就要放在独立的现代 CSS 文件中，通过 或 JS 动态加载来隔离。
最容易被忽略的是：动画结束后的状态保持。CSS animation-fill-mode: forwards 在 IE10+ 有效，但 IE9 完全无效；JS 降级必须手动在最后一帧设置最终样式，否则元素会瞬间回退到初始态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
