CSS过渡（Transition）详解

描述
CSS过渡（Transition）是一种用于控制CSS属性变化过程的动画技术。当元素的某个属性值发生变化时（如鼠标悬停时改变颜色），过渡可以让你指定这个变化应该以何种方式、在多长时间内完成，而不是瞬间切换。过渡主要涉及四个属性：transition-property、transition-duration、transition-timing-function 和 transition-delay。

解题过程

1. 理解过渡的基本场景
   假设有一个按钮，默认背景色为蓝色，鼠标悬停时变为红色。没有过渡时，颜色会瞬间切换。添加过渡后，颜色会平滑渐变。

2. 核心属性分解

   • transition-property：指定要应用过渡的CSS属性（如background-color、transform）。可以用all表示所有属性。
   • transition-duration：定义过渡持续时间（如1s或500ms）。
   • transition-timing-function：控制变化速度曲线（如匀速linear、先慢后快ease-in）。
   • transition-delay：设置过渡开始前的延迟时间（如0.5s）。

3. 简写语法
   使用transition简写属性按顺序定义：

   transition: property duration timing-function delay;
   

   例如：

   button {
     transition: background-color 0.3s ease-in-out 0.1s;
   }
   

4. 实际应用步骤

   • 步骤1：在元素默认样式中声明过渡属性。
   • 步骤2：在触发状态（如:hover）中改变目标属性值。
     示例：

   .box {
     width: 100px;
     height: 100px;
     background-color: blue;
     transition: all 0.5s ease; /* 所有属性变化应用0.5秒缓动效果 */
   }
   .box:hover {
     background-color: red;
     transform: scale(1.2); /* 悬停时放大1.2倍 */
   }
   

5. 多属性分别控制
   可以为不同属性设置不同的过渡效果：

   .box {
     transition: 
       background-color 0.3s linear,
       transform 0.5s ease-in-out;
   }
   

6. 注意事项

   • 过渡仅对可插值的属性有效（如颜色、尺寸、透明度等，display属性无效）。
   • 始终在默认状态定义过渡，而非触发状态，否则返回时可能无动画效果。
   • 使用transitionend事件可在JavaScript中监听过渡完成。

总结
CSS过渡通过平滑的属性变化增强用户体验，关键在于合理配置持续时间、速度曲线和延迟。结合交互状态（如悬停、聚焦）或JavaScript动态添加类名，可实现丰富的动画交互效果。