CSS3 Transition 过渡动画效果的实现及使用方法详解

1. 过渡动画简介

CSS3 transition 属性可以为元素的属性值的变化添加过渡效果，让元素属性值的改变不是立即的，而是逐渐完成的，从而实现各种酷炫的动画效果。

过渡动画有四个重要的属性：

• transition-property：指定要应用过渡效果的元素属性。
• transition-duration：指定过渡动画的持续时间。
• transition-timing-function：指定过渡动画的动画曲线。
• transition-delay：指定过渡动画的延迟时间。

2. transition-property 属性

transition-property 属性指定要应用过渡效果的元素属性。该属性可以接受多个值，用空格分隔。

如果未指定 transition-property 属性，则默认对所有元素属性应用过渡效果。

3. transition-duration 属性

transition-duration 属性指定过渡动画的持续时间。该属性可以接受一个时间值或一个百分比值。

如果指定一个时间值，则该值表示过渡动画的持续时间。例如，transition-duration: 1s 表示过渡动画持续1秒。

如果指定一个百分比值，则该值表示过渡动画持续时间的百分比。例如，transition-duration: 50% 表示过渡动画持续父元素动画持续时间的50%。

4. transition-timing-function 属性

transition-timing-function 属性指定过渡动画的动画曲线。该属性可以接受以下值：

• ease：默认值。平滑的动画曲线，从慢到快再到慢。
• linear：线性的动画曲线，匀速变化。
• ease-in：从慢到快的动画曲线。
• ease-out：从快到慢的动画曲线。
• ease-in-out：从慢到快再到慢的动画曲线，比 ease 更平滑。

5. transition-delay 属性

transition-delay 属性指定过渡动画的延迟时间。该属性可以接受一个时间值或一个百分比值。

如果指定一个时间值，则该值表示过渡动画的延迟时间。例如，transition-delay: 1s 表示过渡动画延迟1秒后开始。

如果指定一个百分比值，则该值表示过渡动画延迟时间的百分比。例如，transition-delay: 50% 表示过渡动画延迟父元素动画持续时间的50%后开始。

6. 过渡动画示例

下面是一个过渡动画的示例：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s ease-in-out;
}

.box:hover {
  width: 200px;
}

当鼠标悬停在 .box 元素上时，元素的宽度会从100px过渡到200px。过渡动画的持续时间为1秒，动画曲线为 ease-in-out。

7. 总结

CSS3 transition 属性可以为元素的属性值的变化添加过渡效果，让元素属性值的改变不是立即的，而是逐渐完成的，从而实现各种酷炫的动画效果。

transition-property 属性指定要应用过渡效果的元素属性。transition-duration 属性指定过渡动画的持续时间。transition-timing-function 属性指定过渡动画的动画曲线。transition-delay 属性指定过渡动画的延迟时间。