要让多个css属性同时过渡，必须显式列出transition-property（小写、逗号分隔、无引号），并配以transition-duration；禁用all，避免不可动画属性，优先选用opacity、transform等高性能项。
要让多个 CSS 属性同时拥有过渡效果，必须显式列出它们，并确保 transition-property 与其他子属性（尤其是 duration）协同工作。靠 all 虽快但不可控，容易在 Safari、旧 WebView 中失效，或意外触发低效动画。
transition-property 必须写对、写全
多个属性用英文逗号分隔，不加引号，全部小写：
- ✅ 正确：
transition-property: opacity, transform, background-color; - ❌ 错误：
transition-property: "opacity, transform"（带引号语法非法） - ❌ 错误：
transition-property: Opacity, Transform（大小写不规范，虽部分浏览器容错，但 lint 工具报错、协作易混淆） - ⚠️ 注意：
border、margin、flex等复合属性不推荐直接写——行为不一致，应拆成border-color、margin-top、flex-grow等具体子项
duration 是硬性门槛，不能省略
只设 transition-property 不设时间，等于没写过渡——浏览器按 0s 处理，视觉上就是“跳变”。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- ✅ 统一时间：
transition-property: opacity, transform; transition-duration: 0.3s;→ 两者都用 0.3 秒 - ✅ 分别控制：
transition: opacity 0.2s, transform 0.4s ease-out;→ 每个属性配独立时长与缓动 - ⚠️ 错位风险：若用分开声明方式（如
transition-duration: 0.2s, 0.4s），顺序必须和transition-property严格对齐；否则第一个时间配第一个属性，第二个时间配第二个属性，错一位就全乱
避开不可动画的属性，优先选高性能项
不是所有属性都能过渡。只有「可插值」（animatable）的才有效，比如：
- ✅ 安全高效：
opacity、transform（缩放、位移、旋转）——走 GPU 加速，不触发布局重排 - ✅ 可用但稍重：
width、height、padding、background-color—— 触发重绘，大量使用需谨慎 - ❌ 无效属性：
display（none↔block无中间态）、z-index、font-family、content—— 写了也不动
慎用 all，禁用用 none
transition-property: all 表面省事，实际隐患多：
- 老版 Safari 可能跳过
transform或opacity，导致部分变化无动画 - 第三方样式或组件更新后，新增的可动画属性（如
box-shadow）会悄悄动起来，调试困难 - 想临时关闭过渡？别只设
transition-duration: 0s—— 正确做法是加一个 class：.no-transition { transition-property: none; }，它会彻底禁用整个过渡引擎
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
