CSS transition(过渡效果)详解

1. CSS transitions（过渡效果）允许你在CSS属性值之间平滑地过渡，而不需要使用JavaScript。
2. 当CSS属性值改变时，transition可以创建动画效果，让元素从一个状态平滑过渡到另一个状态。
3. 过渡可以应用于几乎所有的CSS属性，例如颜色、大小、位置和许多其他属性。

基本语法.

selector {
  transition: property duration timing-function delay;
}

property: 指定要过渡的CSS属性。例如width、height、background-color等。如果你希望所有可过渡的属性都应用过渡效果，可以使用all。
duration: 过渡效果持续的时间，以秒或毫秒为单位。例如2s（2秒）或200ms（200毫秒）。
timing-function: 控制过渡的速度曲线。预定义的值包括linear、ease、ease-in、ease-out和ease-in-out。
delay: 延迟过渡效果的开始。例如1s会在触发过渡效果后1秒才开始过渡。
示例

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: background-color 2s ease-in-out 0s;
}

.box:hover {
  background-color: red;
}

在这个例子中，.box元素在鼠标悬停时背景颜色会从蓝色平滑过渡到红色，过渡时间为2秒，使用ease-in-out速度曲线，没有延迟。

使用多个过渡
你可以在同一个元素上应用多个过渡效果。只需要在transition属性中用逗号分隔每个过渡。

.box {
  transition: background-color 2s, width 1s ease-in 1s;
}

这个例子同时对背景颜色和宽度属性应用了过渡效果。背景颜色过渡持续2秒，而宽度过渡在1秒后开始，持续1秒，并且有一个ease-in的速度曲线。

注意事项

并非所有的CSS属性都支持过渡效果。一般来说，只有数值和颜色属性可以过渡，而像display这样的属性则不可以。
过渡效果需要触发才能生效，如伪类（:hover、:focus等）、JavaScript更改类或直接更改样式。
过度使用过渡效果可能会导致性能问题，特别是在移动设备上。务必合理使用。
CSS transitions为创建平滑的动画效果提供了一种简单而强大的方式，可以极大地提升用户界面的体验。