@property必须在css中声明且位于引用规则之前，html仅提供元素；未声明@property时修改css变量不会触发动画，因浏览器无法插值；需指定syntax和initial-value，并在样式中实际使用变量才能生效。
CSS @property 本身不能直接“在 HTML 中用”，它纯属 CSS 规则，必须写在 很多人把 这是最典型也最容易翻车的场景：直接在 使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。 截至 Firefox 128（2026 年 5 月最新稳定版）， 真正容易被忽略的点是：@property 声明必须出现在所有引用它的 CSS 规则之前，且不能被嵌套在 <style></style> 里或外部 CSS 文件中；HTML 只负责提供承载动画的元素（比如 <div class="loader">），样式和动画逻辑全由 CSS 控制。
<h3>为什么直接改 <code>var(--size) 不会触发动画
@property 当成“给变量加 transition 就能动”，结果写了 transition: --size 0.3s 却毫无反应——根本原因是：没有 @property 声明，浏览器就把 --size 当作无类型的字符串，完全无法插值。
@property --size { syntax: "<length>"; initial-value: 10px; inherits: false; }</length> 显式注册syntax 和 initial-value 缺一不可；漏掉 initial-value 在 Firefox/Chrome 新版中会导致整个声明被忽略background-image 或 width 里调用 var(--size)）也不会触发任何动画怎么让
radial-gradient 的半径平滑缩放@keyframes 里改 background-image: radial-gradient(... 10px, ...) 中的数值，动画必定跳变。正确路径是抽离可动画维度 + 类型声明。
@property --r { syntax: "<length>"; initial-value: 8px; inherits: false; }</length> 声明半径变量background-image: radial-gradient(#000 var(--r), transparent 1px)
--r: 0px，改用 --r: 0.5px 或 --r: 1px，否则 Chrome 128+ 和 Safari 16.4+ 在某些渲染路径下会丢帧甚至消失ease-in-out 或 cubic-bezier(.25,.46,.45,.94)，硬用 linear 容易显得机械@property 在 Firefox 中完全不生效怎么办
@property 仍处于实验性支持状态，默认关闭，@supports (animation-timeline: auto) 也检测不到它。别指望 @supports 自动降级——它根本不会进这个分支。
font-size 模拟长度变量（因为 font-size 天然可动画且兼容所有浏览器）.loader { font-size: 10px; background-image: radial-gradient(#000 calc(0.8em), transparent 1px); }，再对 font-size 做动画@property 规则——CSSOM 插入后，已解析的样式表不会重新计算动画上下文，基本无效@property 动画，建议明确标注 “仅限 Chromium/Safari 最新版”，并在构建时用 PostCSS 插件自动注入降级规则@media 或 @layer 内部（除非整个 @layer 声明顺序严格前置），否则变量类型信息在解析时就丢失了。
