CSS3 transition 属性

CSS 属性 transition 用于指定元素从一种样式平滑过渡到另一种样式的效果。通过设置 transition 属性，我们可以控制元素在改变样式时的过渡效果，比如渐变、缩放、旋转等。

语法

transition: property duration timing-function delay;

• property：指定要过渡的 CSS 属性，可以是 all（所有属性）、margin、color 等。
• duration：指定过渡的持续时间，单位为秒（s）或毫秒（ms）。
• timing-function：指定过渡的时间函数，比如 ease、linear、ease-in-out 等。
• delay：指定过渡开始前的延迟时间，单位为秒（s）或毫秒（ms）。

示例

// www.javascriptcn.com code example
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s ease-in-out 0.5s;
}

.box:hover {
  width: 200px;
}

在上面的示例中，当鼠标悬停在 .box 元素上时，宽度会在 1 秒内从 100px 平滑过渡到 200px，过渡效果为 ease-in-out，延迟时间为 0.5 秒。

注意事项

• 使用 transition 属性时，需要注意不要过度使用动画效果，以免影响用户体验。
• 可以通过在不同状态下设置不同的 transition 属性来实现更加复杂的过渡效果。
• 在移动端开发中，要注意过渡效果可能会影响性能，需要谨慎使用。