通过逗号分隔transition-property与transition-duration可精确控制子元素各属性的过渡时间，如opacity 0.3s、transform 0.6s、background-color 0.4s，实现多层次动效，需确保属性与时间顺序一一对应，配合transition-delay或简写形式灵活调控动画节奏。
当需要对CSS过渡中的子元素多个属性分别控制时，可以通过transition-property与transition-duration的组合精确设定每个属性的变化时间和行为。关键在于使用逗号分隔多个属性值，确保它们一一对应。
transition-property 与 duration 的对应关系
CSS允许在同一个选择器中为多个属性设置不同的过渡效果。只要将transition-property和transition-duration用逗号分隔列出，浏览器会按顺序匹配每个属性与其对应的持续时间。
.child {<br>
transition-property: opacity, transform, background-color;<br>
transition-duration: 0.3s, 0.6s, 0.4s;<br>
}
这意味着：
- opacity 过渡时间为 0.3 秒
- transform 过渡时间为 0.6 秒
- background-color 过渡时间为 0.4 秒
单独控制子元素的不同动画节奏
在父容器触发状态变化（如:hover）时，子元素可能需要以不同速度响应。利用上述语法可实现层次分明的动效。
示例：悬停时文字快速淡入，图标缓慢放大，背景色中速变化
立即学习“前端免费学习笔记（深入）”；
.parent:hover .text {<br>
opacity: 1;<br>
transform: translateY(0);<br>
}<br><br><pre class='brush:php;toolbar:false;'>.text {<br>
opacity: 0;<br>
transform: translateY(10px);<br>
transition-property: opacity, transform;<br>
transition-duration: 0.2s, 0.5s;<br>
transition-timing-function: ease-out;<br>
}
注意点与最佳实践
要确保属性和时间的配对正确，避免因数量不匹配导致意外继承或忽略。
- 属性名拼写必须准确，如margin-left不能写成marginLeft
- 若某个属性不需要过渡，不要将其列入transition-property
- 可结合transition-delay进一步控制出场顺序
- 使用简写形式时需保持顺序一致：transition: opacity 0.3s ease, transform 0.6s ease;
基本上就这些。只要理清列表项之间的映射关系，就能灵活控制子元素各个属性的过渡节奏。
