css transition兼容性,CSS3 Transition详解和使用
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详解和使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小米4c手机显示无服务器,小米4c的出现
- 下一篇： html中怎样引入外部字体文件路径,CS