@property动画不生效主因是构建工具误删、加载顺序错乱或运行时注入无效：tree-shaking剔除未显式引用的声明；@import/@layer导致注册晚于使用；postcss插件（如stage
生产构建中 @property 动画不生效，基本不是语法写错了，而是构建工具在压缩或提取过程中把它删了、移位了，或者压根没让它进最终 CSS 文件。
Webpack / Vite 构建时 @property 被 Tree-shaking 误删
现代构建工具（尤其是开启 CSS 提取和 minify 后）会扫描 CSS 中“被使用”的变量：如果 @property 声明后，var(--x) 没在同一体系内被显式引用（比如写在 JS 模块里、或用 CSS-in-JS 动态注入），它就可能被判定为“未使用”而直接剔除。
- 检查打包后的 CSS 文件（如
dist/assets/index.abc123.css），搜索@property—— 如果整段消失，大概率是被移除了 - Vite 用户需确认
build.cssCodeSplit和build.minify配置未触发过度优化；可临时设minify: false验证 - Webpack +
css-minimizer-webpack-plugin需显式关闭discardUnused或添加preserveComments: true辅助排查
@property 写在 @layer 或 @import 后加载顺序错乱
@property 必须在任何引用它的 var(--x) 规则之前解析生效。但构建工具常把 @import 或 @layer 块重排，导致注册晚于使用。
- 打开 DevTools → Elements → Styles，选中目标元素，看
var(--x)是否显示为「无效值」或「--x: (invalid)」 - 禁止在
@import的文件里写@property，除非你能确保该文件在所有其他 CSS 之前加载（多数构建工具不保证） - 强制写在主 CSS 入口顶部（如
main.css开头），且不嵌套在任何选择器或@media内
PostCSS 插件干扰 @property 解析
部分 PostCSS 插件（如 postcss-custom-properties、postcss-preset-env）会尝试“降级”或重写自定义属性逻辑，结果把 @property 当成普通变量处理，甚至报错跳过。
- 检查构建配置中是否启用了
postcss-preset-env且stage —— 它默认不支持 <code>@property，会静默忽略 - 禁用所有 PostCSS 对 CSS 变量的转换插件，只留
autoprefixer，再测试 - 若必须用
postcss-preset-env，需显式配置features: { 'custom-properties': false, '@property': true }
真正容易被忽略的是：即使构建产物里保留了 @property，如果它所在的样式块被动态 loadCSS 或 insertRule 注入，浏览器也不会重新注册——@property 只在 CSS 解析阶段生效，运行时注入等于白写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
