CSS3 过渡效果

在 CSS3 中我们可以定义元素的过渡效果，其实现方式是通过在给定时间内容平滑地改变元素的属性值达到。

例如，下面演示，将鼠标悬停到元素上时触发元素的hover事件，该事件中定义了元素过渡效果，从而展现出动画效果。

在本章节中，您将通过学习以下属性来CSS3中过渡效果的使用。

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

浏览器对过渡的支持

并不是所有浏览器版本都支持CSS3的过渡效果属性，表格中的数字注明了完全支持该属性的首个浏览器版本。

如何创建 CSS 过渡？

创建CSS3的过渡效果，必须做以下两件事：

• 添加效果的 CSS 属性
• 添加效果的持续时间

注意：如果不指定效果持续时间则其会使用默认值0，则过渡不会有效果。

下例中展示了为 width 属性指定了过渡效果的div，持续时间为 2 秒：

示例

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

上例中已经定义了div属性发生变化是会有2s的过渡效果。

现在，我们为 width 属性指定一个鼠标悬停在div元素上时的新值：

示例

div:hover {
  width: 300px;
}

当光标从元素上移开时，元素过渡效果为将逐渐变回其原始样式。

添加多个属性值

下面的例子为 width 和 height 属性都添加了过渡效果，width 是 2 秒，height 是 4 秒：

示例

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

指定过渡的速度曲线

CSS3中的 transition-timing-function 属性规定过渡效果的速度曲线。

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;}

CSS3中的延迟过渡效果

CSS3 中的 transition-delay 属性规定过渡效果的延迟（以秒计）。

例如定义在启动之前有 1 秒的延迟：

示例

div {
  transition-delay: 1s;
}

过渡中定义转换效果

过渡属性和转换属性可以配合使用，如下例为转换添加过渡效果：

示例

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

单独指定CSS过渡属性

除了简写的 transition 属性定义方式，过渡效果的CSS属性写法还支持一一指定 CSS 过渡属性，如下所示：

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

过渡属性

下表列出了所有的过渡属性: