freeCodeCamp

2.7 KiB

Raw Blame History

title	localeTitle
CSS3 Transitions	CSS3过渡

CSS3过渡

如果您希望您的应用或网页更具动态性和美观，则使用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)

您可以在这里试验并了解有关_Cubic Bezier的_更多信息

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

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

例子

以下是一些包含简单过渡的简单笔：

2.7 KiB Raw Blame History Unescape Escape

CSS3过渡

属性描述

transition-property

transition-duration

transition-timing-function

transition-delay