CSS变量需配合可动画属性（如transform、opacity）实现动态动画，须定义在:root或确保作用域可见，内联style注入最可控；变量变更不触发重播，需手动清空animation后重设或用class切换；IE不支持，需@supports渐进增强或预设class回退。
CSS 变量本身不能直接触发动画，但配合 @keyframes 和可动画属性（如 transform、opacity、color），就能实现动态参数驱动的动画复用——这是目前最轻量、最灵活的纯 CSS 动画组织方式。
为什么 var(--x) 写进 @keyframes 有时不生效
常见错误是把变量定义在局部作用域（比如某个 class 里），而 @keyframes 在全局解析时读不到；或者变量值本身不可动画（比如 --gap: 1rem 用于 margin，但 margin 不支持 calc() 或变量插值动画）。
-
@keyframes中只能使用「可被浏览器插值」的属性，var(--x)必须落在这些属性里：如transform: translateX(var(--tx))、background-color: var(--bg)（前提是--bg是合法颜色值） - 变量必须在作用域内已声明，推荐统一写在
:root，或确保父元素/目标元素的style或 class 已注入该变量 - 不要在
@keyframes里写var(--delay)这类控制动画行为的参数——animation-delay等播放控制属性不接受变量，得靠外部 class 或内联style设置
怎么用内联 style 注入变量并驱动动画
这是最可控、最易调试的方式：HTML 元素自带 style="--offset: 20px; --duration: 0.6s"，CSS 里直接读取，无需 JS 就能差异化动画。
- 定义通用动画：
@keyframes slide-in { 0% { transform: translateX(calc(-1 * var(--offset, 0))); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } - 绑定到 class：
.anim-slide { animation: slide-in var(--duration, 0.4s) ease-out forwards; } - HTML 中按需传参：
<div class="anim-slide" style="--offset: 40px; --duration: 0.8s">A</div> <div class="anim-slide" style="--offset: 80px; --duration: 0.5s">B</div>
setProperty 动态改变量时动画不重播？
改了变量值，但动画没重新跑——因为浏览器不会自动触发重播。它只响应「样式计算结果变化」，不监听变量变更事件。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 手动重播技巧：先清空
animation，再设回原值，强制重触发el.style.animation = 'none'; setTimeout(() => { el.style.animation = 'slide-in 0.6s ease-out forwards'; }, 10); - 更稳妥的做法是用一个开关类 + 变量组合：
.anim-trigger { animation: slide-in var(--duration) ease-out forwards; } /* JS 只切换 class */ el.classList.remove('anim-trigger'); el.offsetHeight; // 强制重排，确保移除生效 el.classList.add('anim-trigger'); - 注意：如果变量值未变（比如两次都设
--scale: 1.2），即使调用了setProperty，也不会触发重计算
IE 兼容性与 fallback 方案
CSS 变量在 IE 完全不支持，且无 polyfill 能真正补全 @keyframes 中的变量行为。
- 若必须兼容 IE，放弃变量驱动动画，退回预设 class 方案：
.anim-slide-200ms { animation: slide-in 0.2s ease-out forwards; } .anim-slide-400ms { animation: slide-in 0.4s ease-out forwards; } - 用 Sass/Less 编译时生成多套规则，避免手写冗余 class
- 现代项目中，建议用
@supports ( --css: variables )做渐进增强，变量动画走一套，fallback 走另一套静态规则
真正难的不是写对语法，而是判断哪些变量该由 HTML 控制、哪些该由 JS 控制、哪些根本不该放进动画逻辑里——比如滚动距离、鼠标位置这类实时值，硬塞进 CSS 变量反而增加同步负担，不如交给 requestAnimationFrame 直接操作 style.transform。
