CSS 过渡效果

CSS 过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。

在本节中，会涉及到以下属性：

• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

如何使用 CSS 过渡？

要创建过渡效果，至少为元素设置两件事：

• 用 CSS 定义元素要呈现的效果
• 过渡效果持续时间

注意： 过渡效果持续时间，过渡将不起作用，因为默认值为 0。

我们通过一个例子说明 如何为一个边长为 100px 的红色 <div> 元素添加在鼠标悬停的时在 2 秒的时间内宽度变成 300px 的过渡效果。

1. 先定义元素的初始效果：高宽为 100px，背景红色，同时给 width 属性定义过渡效果，过渡的持续时间为 2 秒。

   div {
     width: 100px;
     height: 100px;
     background: red;
     transition: width 2s; /* 设置给 width 属性应用过渡效果，持续 2 秒 */
   }
   

2. 再定义鼠标悬停效果：宽度为 300px

   div:hover {
     width: 300px;
   }
   

3. 鼠标移动到红色 <div> 上查看效果

为多个属性设置过渡效果

多个属性的过渡效果只需要使用逗号间隔起来。

为宽度和高度同时添加过渡效果

div {
  transition: width 2s, height 4s;
}

设置过渡的速度曲线

transition-timing-function 属性设置过渡效果的速度曲线。可选值如下：

• ease - 过渡效果缓慢开始，缓慢结束，中间快速（这是默认值）
• linear - 过渡效果从开始到结束速度相同
• ease-in - 过渡效果缓慢开始
• ease-out - 过渡效果缓慢结束
• ease-in-out - 过渡效果缓慢开始、缓慢结束
• cubic-bezier(n,n,n,n) - 通过三次贝塞尔函数中自定义

以下示例显示了一些不同的速度曲线：

#div1 {
  transition-timing-function: linear;
}
#div2 {
  transition-timing-function: ease;
}
#div3 {
  transition-timing-function: ease-in;
}
#div4 {
  transition-timing-function: ease-out;
}
#div5 {
  transition-timing-function: ease-in-out;
}

设置过渡的延迟时间

transition-delay 属性设置过渡效果的延迟时间（以秒为单位）。

开始过渡效果前有 1 秒的延迟：

div {
  transition-delay: 1s;
}

为 CSS 变换设置过渡效果

为变换添加过渡效果：

div {
  transition: width 2s, height 2s, transform 2s;
}

关于 CSS 变换的更多信息请访问：CSS 二维变换和 CSS 三维变换。

为所有属性设置过渡效果

除了像具体的指定 width, height 等属性应用过渡效果，还可以通过关键字 all 为所有的属性添加过渡效果。

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: all 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
  background: yellow;
}

浏览器对过渡的支持

表中列出了完全支持过渡相关属性的第一个浏览器版本。

CSS 过渡属性

下表列出了所有 CSS 过渡属性：