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、可以为每个受过渡影响的属性分别指定不同的持续时间，用逗号分隔。
Yes!Sun基于PHP+MYSQL技术，体积小巧、应用灵活、功能强大，是一款为企业网站量身打造的WEB系统。其创新的设计理念，为企业网的开发设计及使用带来了全新的体验：支持前沿技术：动态缓存、伪静态、静态生成、友好URL、SEO设置等提升网站性能、用户体验、搜索引擎友好度的技术均为Yes!Sun所支持。易于二次开发：采用独创的平台化理念，按需定制项目中的各种元素，如：产品属性、产品相册、新闻列表
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、当对多个属性设置不同延迟时，能实现连续或交错的动画序列效果。
