CSS3的transition属性详解

CSS3的transition属性用于定义元素从一种样式平滑过渡到另一种样式的效果。可以设置过渡效果的属性包括：

• background-color
• border
• height
• width
• opacity
• transform
• 等等

语法

transition: property duration timing-function delay;

• property：指定过渡效果要作用于哪个CSS属性，多个属性可以用逗号分隔。
• duration：指定过渡效果的持续时间，单位为秒或毫秒。
• timing-function：指定过渡效果的时间函数，常用的包括 ease、linear、ease-in、ease-out、ease-in-out 等。
• delay：指定过渡效果的延迟时间，单位为秒或毫秒。

示例1 - 过渡颜色

下面的代码演示了如何使背景颜色从红色逐渐过渡到黄色：

<div class="example1"></div>

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

.example1:hover {
  background-color: yellow;
}

在鼠标悬停在该元素上时，背景颜色会平滑地从红色过渡到黄色，持续1秒钟。

示例2 - 过渡尺寸和旋转角度

下面的代码演示了如何使元素尺寸和旋转角度同时过渡：

<div class="example2"></div>

.example2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s ease-out, height 1s ease-out, transform 1s ease-out;
}

.example2:hover {
  width: 200px;
  height: 200px;
  transform: rotate(180deg);
}

在鼠标悬停在该元素上时，它的尺寸会从100px × 100px 平滑过渡到200px × 200px ，并且会顺时针旋转180度。

总结

CSS3的transition属性是一个非常实用的属性，可以为网页添加平滑的过渡效果，使交互更加生动。需要注意的是，过渡效果要合理地使用，不宜过多地使用，以免页面效果过于繁琐，影响用户的使用体验。