@property必须在CSS中声明且位于引用规则之前，HTML仅提供元素；未声明@property时修改CSS变量不会触发动画，因浏览器无法插值；需指定syntax和initial-value，并在样式中实际使用变量才能生效。
CSS @property 本身不能直接“在 HTML 中用”，它纯属 CSS 规则，必须写在 <style> 里或外部 CSS 文件中；HTML 只负责提供承载动画的元素（比如 <div class="loader">），样式和动画逻辑全由 CSS 控制。
为什么直接改 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, ...) 中的数值，动画必定跳变。正确路径是抽离可动画维度 + 类型声明。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
@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 中完全不生效怎么办
截至 Firefox 128（2026 年 5 月最新稳定版），@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做动画 - 避免用 JS 注入
@property规则——CSSOM 插入后，已解析的样式表不会重新计算动画上下文，基本无效 - 如果项目强依赖
@property动画，建议明确标注 “仅限 Chromium/Safari 最新版”，并在构建时用 PostCSS 插件自动注入降级规则
真正容易被忽略的点是：@property 声明必须出现在所有引用它的 CSS 规则之前，且不能被嵌套在 @media 或 @layer 内部（除非整个 @layer 声明顺序严格前置），否则变量类型信息在解析时就丢失了。
