list-style 相关属性不可动画，需用伪元素模拟：移除默认标记，通过 ::before 设置 content、opacity、transform 等可过渡属性实现动画效果。
list-style 本身不支持 CSS transition
直接对
或
添加
不会生效，因为这些属性不是可动画的 CSS 属性（CSS Transitions Level 1 规范中未列入动画列表）。
浏览器
会静默忽略过渡声明，不会报错，但你完全看不到变化过程。
用
伪元素
+ opacity/transform 模拟可过渡的列表标记
真正可行的方案是剥离默认标记，改用
伪元素生成自定义符号，并对其
、
、
等支持过渡的属性做动画：
常见可过渡替代项包括：
不能动，但可通过切换 class 控制不同
的显隐；
可用于图标字体（如 Font Awesome）；
配合
能实现 sprite 动画效果。
使用 SVG 图标时注意 fill 和 stroke 的过渡兼容性
若用内联 SVG 作为列表标记（比如嵌在
的
不适用，需改用
或实际插入
），关键点在于：
立即学习
“
前端免费学习笔记（深入）
”；
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
和
在所有现代浏览器中都支持
避免用
引用外部
，会导致过渡失效
SVG 必须内联或 base64
编码
，否则无法对内部属性做 CSS 控制
例如：
JavaScript 辅助切换时别忘了触发重排
如果通过 JS 动态切换类名来控制样式（比如点击展开后改变标记），而过渡没触发，大概率是因为浏览器把“移除旧类”和“添加新类”合并到了一次渲染中。解决方法是强制重排：
或者更稳妥地用
读取任意属性（如
）来触发同步布局计算。
最易被忽略的是：过渡依赖于“两个不同状态之间的数值变化”，如果起始或结束状态没有明确声明（比如只在 hover 里写
，但默认状态没设
），动画可能不启动或表现异常。
list-style-typelist-style-imagetransition::beforeopacitytransformcolor.custom-list li {
list-style: none;
position: relative;
padding-left: 2em;
}
.custom-list li::before {
content: "•";
position: absolute;
left: 0;
opacity: 0.6;
transition: opacity 0.3s ease, transform 0.2s ease;
}
.custom-list li:hover::before {
opacity: 1;
transform: scale(1.2);
}content::beforecolorbackground-imagebackground-position::beforecontentbackground-image: url("data:image/svg...")fillstroketransitionurl(#id).icon-list li::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7.18 14.2l-5-4.87 6.91-1.01L12 2z'/%3E%3C/svg%3E");
transition: background 0.3s ease;
}
.icon-list li:hover::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23007bff' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7.18 14.2l-5-4.87 6.91-1.01L12 2z'/%3E%3C/svg%3E");
}el.classList.remove("state-a");
// 强制 reflow
void el.offsetWidth;
el.classList.add("state-b");getComputedStyleheighttransformtransform: none