Transition 簡介

Transition 可以設置 CSS 屬性的過渡效果，它有以下幾個屬性。

transition-property 用于指定應用過渡屬性的名稱

transition-duration 用于指定這個過渡的持續時間

transition-delay 用于指定延遲過渡的時間

transition-timing-function 用于指定過渡的類型

transition-property

transition-property 用于指定應用過渡的屬性名稱，可以指定多個屬性名稱，多個屬性名稱之間用, 分隔。

默認值為 all 也就是所有的元素都應用過渡效果。

例如，想讓容器的寬高有一個過渡的效果，就可以這樣寫:

.box {

width: 200px;

height: 200px;

background-color: dodgerblue;

transition-property: width, height;? ?/*設置寬高過渡的屬性*/

}

.box:hover {? /*在鼠標移入的時候修改寬高*/

width: 400px;

height: 400px;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

注意：當只設置了 transition-property 屬性而沒有設置過渡持續時間的時候，過渡效果不會生效。

transition-duration

transition-duration 用于設置過渡的持續時間，屬性值以秒s或毫秒ms為單位，默認值為0。

同樣可以指定多個時長，多個每個時長會被應用到由 transition-property 指定的對應屬性上。

例如：想讓容器的寬度有一個5秒的過渡效果，高度有一個3秒的過渡效果，就可以這樣寫:

.box {

width: 200px;

height: 200px;

background-color: dodgerblue;

transition-property: width, height;

transition-duration: 5s, 3s;? /*設置與 transition-property 對應的過渡時間*/

}

.box:hover { /*在鼠標移入的時候修改寬高*/

width: 400px;

height: 400px;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

運行效果圖：

如果指定的時長個數小于屬性個數，那么時長列表會重復。

以下代碼的意思是：寬度、高度、背景顏色的過渡時間都是5秒。

.box {

width: 200px;

height: 200px;

background-color: dodgerblue;

transition-property: width, height, background-color;? /* 屬性列表長一些 */

transition-duration: 5s;? /* 如果時長的個數小于屬性列表，則時長列表會重復 */

}

.box:hover {

width: 400px;

height: 400px;

background-color: deeppink;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

運行結果如下：

如果時長列表更長，那么該列表會被裁減。

兩種情況下，屬性列表都保持不變。

以下代碼的意思是：寬度的過渡時間是5秒，高度3秒，背景顏色2秒

.box {

width: 200px;

height: 200px;

background-color: dodgerblue;

transition-property: width, height, background-color;? /* 設置三個屬性的過渡效果 */

transition-duration: 5s, 3s, 2s, 1s, 0s;? /* 有五個時長，會從第四個開始截斷。 */

}

.box:hover {

width: 400px;

height: 400px;

background-color: deeppink;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

運行結果如下

transition-delay

transition-delay 規定了在過渡效果開始作用之前需要等待的時間(延遲時間)，值以秒(s)或毫秒(ms)為單位，表明動畫過渡效果將在何時開始。取值為正時會延遲一段時間來響應過渡效果；取值為負時會導致過渡立即開始。

可以指定多個延遲時間，每個延遲將會分別作用于你所指定的相符合的css屬性transition-property。

.box {

width: 200px;

height: 200px;

background-color: dodgerblue;

transition-property: width;? /* 設置寬度有過渡效果 */

transition-duration: 3s;? /* 設置過渡時間為 3s */

transition-delay: 1s;? ?/* 設置延遲時間為 1s */

}

.box:hover {

width: 300px;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

運行結果如下：

transition-timing-function

transition-timing-function用于指定過渡類型，可選值有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

ease 默認值，先加速后減速

.box {

width: 200px;

height: 200px;

background-color: dodgerblue;

transition-property: width;

transition-duration: 3s;

transition-timing-function: ease;? /* 設置過渡類型,默認為 ease(先加速后減速) */

}

.box:hover {

width: 400px;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

運行結果如下：

linear 勻速

transition-timing-function: linear;

1

運行結果如下：

ease-in 加速

transition-timing-function: ease-in;

1

運行結果如下：

ease-out 減速

transition-timing-function: ease-out;

1

運行結果如下：

ease-in-out 先加速后減速，效果比 ease 感覺強烈一些

transition-timing-function: ease-in-out;

1

運行結果如下：

cubic-bezier 貝塞爾曲線

transition-timing-function: cubic-bezier(.09, .88, .2, .17);

1

運行結果如下：

簡寫屬性 transition:

transition是一個簡寫屬性，用于設置 transition-property,transition-duration,transition-timing-function, 和transition-delay。

CSS 過渡 由簡寫屬性 transition 定義是最好的方式，可以避免屬性值列表長度不一，節省調試時間 。

.box {

width: 200px;

height: 200px;

background-color: dodgerblue;

/* transition 簡寫屬性 */

transition: 1s width, 2s height;

}

.box:hover {

width: 400px;

height: 400px;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

運行結果如下：

注意：

在transition屬性中，各個值的書寫順序是很重要的：第一個可以解析為時間的值會被賦值給transition-duration，第二個可以解析為時間的值會被賦值給transition-delay

推薦抒寫順序

過渡時間 過渡樣式 過渡形式 延遲時間 [，過渡時間 過渡樣式 過渡形式 延遲時間]

兼容性

transition可以不用廠商前綴，不過鑒于標準剛剛穩定，對于基于 Webkit的瀏覽器仍然需要廠商前綴。如果想兼容舊版本的瀏覽器那么也需要廠商前綴(例如Firefox 15 及之前版本, Opera 12 及之前版本)

過渡的坑

transition 在元素首次渲染還沒有完成的情況下，是不會觸發過渡的。

過渡如果寫在js 中，則必須 寫在 onload 函數中，否則在頁面中的元素還沒有渲染完的情況下不會觸發過渡!

* {

margin: 0;

padding: 0;

}

.box {

width: 200px;

height: 200px;

background-color: deepskyblue;

margin: 100px auto;

transition: 1s;

}

/* 在元素還沒有完全加載的時候是不會觸發過渡的 */

var box = document.querySelector(".box");

box.style.width = "300px";

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

解決方法

window.onload = function () {

var box = document.querySelector(".box");

box.style.width = "300px";

};

1

2

3

4

5

6

transition 在絕大部分變換樣式切換時，變換組合的個數或位置不一樣時，是沒有辦法觸發過渡的

過渡只關心元素的初始狀態和結束狀態，沒有方法可以獲取到元素在過渡中每一幀的狀態

總結

以上是生活随笔為你收集整理的css transition兼容性,CSS3 Transition详解和使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。