transition属性通过property、duration、timing-function和delay四个子属性控制CSS动画过渡效果，分别用于指定参与过渡的属性、持续时间、速度曲线及延迟时间，实现平滑且可控的状态变化动画。
如果您希望在CSS中实现平滑的动画过渡效果，transition属性提供了多种方式来控制元素状态变化时的视觉表现。以下是transition的四种关键属性及其使用方法：
本文运行环境：MacBook Pro，macOS Sonoma
一、transition-property
该属性用于指定应用过渡效果的CSS属性名称。只有被列出的属性在值发生变化时才会触发动画效果。
1、设置为具体属性名，例如 width 或 background-color，表示仅这些属性变化时产生过渡。
立即学习“前端免费学习笔记（深入）”；
2、使用关键字 all 表示所有可动画的属性都会应用过渡效果。
3、设置为 none 则不应用任何过渡效果。
二、transition-duration
定义过渡效果持续的时间长度，即从旧值到新值的变化过程需要多长时间完成。
1、时间值必须以秒（s）或毫秒（ms）为单位，例如 0.5s 或 200ms。
2、可以为每个受过渡影响的属性分别指定不同的持续时间，用逗号分隔。
3、若未设置此值，默认持续时间为 0s，即无动画即时完成。
三、transition-timing-function
控制过渡过程中的速度曲线，决定动画在时间段内的加速度和减速度表现。
1、常用预设函数包括 ease（慢-快-慢）、linear（匀速）、ease-in（加速进入）、ease-out（减速结束）等。
2、可使用 cubic-bezier(n,n,n,n) 自定义贝塞尔曲线来精确控制速度变化。
3、此属性允许创建更自然或富有弹性的视觉反馈效果。
四、transition-delay
设定过渡效果开始前的等待时间，可用于控制多个属性过渡的先后顺序。
1、时间值同样以秒（s）或毫秒（ms）为单位，例如 0.3s 表示延迟0.3秒后开始动画。
2、可设置负值，使动画从中间状态开始播放，例如 -0.2s。
3、当对多个属性设置不同延迟时，能实现连续或交错的动画序列效果。
