uc浏览器旧版u3内核（低于13.5.0.1234）不支持无前缀的@keyframes和animation，必须全部添加-webkit-前缀；will-change与backface-visibility会致容器空白；推荐用transition替代animation，并严格遵循css注入顺序。
UC浏览器U3内核不支持标准animation语法
UC浏览器旧版（内核版本低于13.5.0.1234）使用的是已停止维护的U3内核，它完全忽略无前缀的@keyframes和animation声明。哪怕你写了@keyframes slideIn和animation: slideIn 1s，页面也毫无反应——浏览器连解析都不做，更不会报错。
必须用-webkit-前缀重写全部关键部分：
-
@keyframes→ 改为@-webkit-keyframes -
animation相关属性（animation-name、animation-duration等）全部加上-webkit-前缀 - 所有
transform值也要加前缀，比如-webkit-transform: translateX(10px)
注意：animation-fill-mode: forwards在U3中支持不稳定，建议改用both或干脆不用，靠JS补终态。
will-change和backface-visibility会直接导致容器空白
UC U3内核对will-change: transform和backface-visibility: hidden不仅不识别，还会触发渲染层崩溃，表现为整个动画容器突然变白或消失。这不是兼容性问题，是硬性缺陷。
排查时直接全局搜索CSS文件：
- 删掉所有
will-change:声明（哪怕只有一处，整块动画就可能挂掉） - 删掉所有
backface-visibility:声明 - 避免在动画元素上设置
opacity: 0再配合animation-fill-mode实现淡入——U3对opacity动画的起始帧处理异常，容易卡死
用transition替代animation更可靠
U3内核对transition的支持率远高于animation，尤其在class切换场景下几乎零失败。把循环动画、入场动画都降级为transition方案，能绕过90%的兼容问题。
实操要点：
- 给元素设基础样式（如
transform: scale(1)），再定义transition: transform 0.3s ease - 通过JS切换类名触发动画：
el.classList.add('active')，对应.active { transform: scale(1.2); } - 避免在
transition中混用left/top和transform——U3对混合定位计算出错，只用transform系属性 - duration必须显式写，比如
0.3s，不能省略单位或写成.3s
动态注入@keyframes时顺序必须严格
如果用JS动态插入CSS规则（比如按需加载动画），U3内核要求@-webkit-keyframes定义必须出现在使用它的style块之前，且不能跨<style></style>标签。哪怕只是顺序颠倒，动画就静默失效。
安全写法：
- 把
@-webkit-keyframes定义放在最顶部的<style></style>里 - 所有用到该动画的CSS规则，统一放在另一个
<style></style>块中，且排在其后 - 不要用
document.styleSheets[0].insertRule()动态追加@keyframes——U3不认这种运行时注入 - 构建工具（如Webpack）若启用了CSS tree-shaking，确认
@-webkit-keyframes没被误删；可加/* webpackChunkName: "animations" */注释锁定
真正麻烦的不是写法本身，而是U3内核对CSS解析顺序的苛刻要求——它不像现代浏览器那样有容错缓冲，错一字符、差一行位置，动画就彻底消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
