CSS3过渡Transitions

如果您希望您的应用或网页更具动态性和美观，则使用CSS3 过渡非常有用。

实际上，转换允许您以 平滑的 方式更改属性（ width ， color ，...）值。

transition属性是transition-property ， transition-duration ， transition-timing-function ， transition-delay的简写属性，语法如下：

transition: transition-property transition-duration transition-timing-function transition-delay

例如 ：

transition: width 2s ease-in-out 1s;

属性描述

transition-property

指定应应用转换的属性的名称 ：

• background-color
• color
• width
• height
• margin
• border-radius
• 等等 ！

例如 ：

transition-property: width; /* means the transition applies on the width */

transition-duration

指定转换应采用 的秒数或毫秒数 ：

例如 ：

transition-duration: 2s /* means the transition effect last 2s */

transition-timing-function

指定过渡效果的速度曲线 。因此，您可以在其持续时间内更改转换的速度 。

以下是最常用的值：

• linear
• ease
• ease-in
• ease-out
• ease-in-out
• cubic-bezier(n, n, n, n)

例如 ：

transition-timing-function: linear

注意：上面的所有值实际上都是特定的cubic-bezier 。例如， linear相当于cubic-bezier(0.25,0.1,0.25,1)

transition-delay

转换开始时以秒或毫秒指定。

例如 ：

transition-delay: 1s /* means wait 1s before the transition effect start */

如何使用过渡？

您可以通过两种方式编写转换：

使用速记属性（ transition ）

div {
  width: 200px;
  transition: all 1s ease-in-out;
 }

 div:hover {
  width: 300px;
 }

为所有过渡属性赋予值

div {
  width: 200px;
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
 }

注意：两个例子都是 等价的

更多CSS教程

学习更多CSS教程