实现html页面动画的方式有很多种，而css3中的过渡属性transition`也是实现动画效果的高频工具。
transition 属性允许 CSS 的属性值在一定的时间区间内平滑地过渡。当元素的某个 CSS 属性值发生变化时，过渡效果可以避免属性值的突然改变，而是以动画的形式逐渐变化，从而增强用户体验。
基本用法
transition 是一个简写属性，它可以一次性设置四个过渡相关的属性，四个属性值分别对应transition-property（指定要应用过渡的 CSS 属性）、transition-duration（定义过渡动画总时长）、transition-timing-function（定义动画速度曲线）、transition-delay（设置动画开始前的等待时间）。
/*复合写法*/ transition: property duration timing-function delay;
参数1：transition-property
property：对应的是transition-property，指定要应用过渡效果的 CSS 属性名称。
可以是单个属性，如 width、opacity 等；也可以是多个属性，用逗号分隔，如 width, height；还可以使用 all 表示所有可过渡的属性。
参数2：transition-duration
duration：定义过渡效果持续的时间，以秒（s）或毫秒（ms）为单位。例如 2s 表示过渡持续 2 秒。
参数3：transition-timing-function
timing-function：指定过渡效果的时间曲线，即过渡的速度变化方式。常见的值有：
-
ease：默认值，过渡开始时较慢，然后加速，结束时又变慢。 -
linear：过渡速度保持一致。 -
ease-in：过渡开始时较慢，然后逐渐加速。 -
ease-out：过渡开始时较快，然后逐渐减速。 -
ease-in-out：过渡开始和结束时较慢，中间加速。 -
cubic-bezier(0.25, 0.1, 0.25, 1.0)（对应ease）`：自定义贝塞尔曲线，通过四个数值来精确控制过渡的速度变化。 -
阶梯函数：
steps(5, jump-start)（用于离散动画）
参数4：transition-delay
delay：定义过渡效果开始前的延迟时间，同样以秒（s）或毫秒（ms）为单位。例如 1s 表示过渡将在 1 秒后开始。
-
负值特性：
-500ms会使动画从中途开始（需总时长 > 延迟绝对值）
运行原理
-
触发条件：必须由 状态变更 引发（如
:hover伪类、JS 修改 class/样式） -
插值计算：浏览器根据起始/结束值和持续时间，计算中间帧属性值
-
渲染管线：
-
触发 CSS 解析 → 样式重算 → 布局（Layout）→ 绘制（Paint）→ 合成（Composite）
-
优化建议：优先使用
transform/opacity触发合成层动画，避免重排
-
注意：父元素的 transition 设置不会继承到子元素；同一元素的相同属性被多个 transition 定义时，后定义的生效；当状态还原时，自动执行反向过渡（除非中途被中断）。
