1、トランジション効果速度プロファイルの速度制御機能を使用して（加速、減速、等）
関数は、その速度を変更するための遷移時間の効果を達成するように、トランジションエフェクト速度速度プロファイルを使用して提供されてもよいです。たとえば：ゆっくり開始してからすぐに、その後加速または減速し始めました。
（1）CSS3速度は以下の関数を定義しています。
線形（立方ベジェ（0,0,1,1）に等しい）同じ速度でトランジションエフェクトの終わりに開始し、所定。
次いで速い、所定のスロースタートを容易にし、低速トランジション効果（立方ベジェ（0.25,0.1,0.25,1））の終わり 。
使いやすさに影響（）0.42,0,1,1（立方ベジェ相当）所定の開始への移行を遅らせます。
容易アウト所定のトランジションエフェクトの端を遅くする（同等の立方ベジェ（0,0,0.58,1））。
緩和・イン・アウト（立方ベジェ（0.42,0,0.58,1）に等しい）遅い開始と終了の規定にトランジション効果を。
立方ベジェ（N、N、 N、N） の値は、それらの立方ベジェ関数を定義します。可能な値は0と1の間の値です。
次いで速い、所定のスロースタートを容易にし、低速トランジション効果（立方ベジェ（0.25,0.1,0.25,1））の終わり 。
使いやすさに影響（）0.42,0,1,1（立方ベジェ相当）所定の開始への移行を遅らせます。
容易アウト所定のトランジションエフェクトの端を遅くする（同等の立方ベジェ（0,0,0.58,1））。
緩和・イン・アウト（立方ベジェ（0.42,0,0.58,1）に等しい）遅い開始と終了の規定にトランジション効果を。
立方ベジェ（N、N、 N、N） の値は、それらの立方ベジェ関数を定義します。可能な値は0と1の間の値です。
（2）速度制御機能を使用することで
のみ使用されているバック遷移時間パラメータとガバナの機能性。あなたは記入しない場合は、デフォルトの速度制御機能（やす）を使用します
|
1
|
transition: opacity
10
s ease-in-out;
|
（3）試料1：
以下はサンプルによって様々な機能との間の速度差の効果を示します。ブロックを回転させながら、マウスをブロックに、ブロック内のブロックは、右方向に移動する、丸い角、文字色と背景色が変更されたとなります。これらの変更は、スタイルトランジション効果を持つことになりますし、異なる速度制御機能を使用するため、遷移速度は異なります。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<!doctype html>
<
html
lang
=
"en"
>
<
head
>
<
title
>hangge.com</
title
>
<
style
>
.trans_box {
padding: 20px;
*zoom:1;
}
.trans_list {
width: 10%;
height: 64px;
margin:10px 0;
color:#fff;
text-align:center;
}
.linear {
-webkit-transition: all 4s linear;
-moz-transition: all 4s linear;
-o-transition: all 4s linear;
transition: all 4s linear;
}
.ease {
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
}
.ease_in {
-webkit-transition: all 4s ease-in;
-moz-transition: all 4s ease-in;
-o-transition: all 4s ease-in;
transition: all 4s ease-in;
}
.ease_out {
-webkit-transition: all 4s ease-out;
-moz-transition: all 4s ease-out;
-o-transition: all 4s ease-out;
transition: all 4s ease-out;
}
.ease_in_out {
-webkit-transition: all 4s ease-in-out;
-moz-transition: all 4s ease-in-out;
-o-transition: all 4s ease-in-out;
transition: all 4s ease-in-out;
}
.trans_box:hover .trans_list, .trans_box_hover .trans_list {
margin-left:89%;
color:#333;
-webkit-border-radius:25px;
-moz-border-radius:25px;
-o-border-radius:25px;
border-radius:25px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
</
style
>
</
head
>
<
div
id
=
"transBox"
class
=
"trans_box"
>
<
div
class
=
"trans_list ease"
>ease<
br
>(default)</
div
>
<
div
class
=
"trans_list ease_in"
>ease-in</
div
>
<
div
class
=
"trans_list ease_out"
>ease-out</
div
>
<
div
class
=
"trans_list ease_in_out"
>ease-in-out</
div
>
<
div
class
=
"trans_list linear"
>linear</
div
>
</
div
>
</
html
>
|
（4）使用样例2：
下面通过对柱状图的宽度改变过渡，演示不同调速函数的效果区别。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
div
{
margin:10px 0;
width:100px;
height:50px;
background:#2D9900;
color:white;
font-weight:bold;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
#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;}
/* Firefox 4: */
#div1 {-moz-transition-timing-function: linear;}
#div2 {-moz-transition-timing-function: ease;}
#div3 {-moz-transition-timing-function: ease-in;}
#div4 {-moz-transition-timing-function: ease-out;}
#div5 {-moz-transition-timing-function: ease-in-out;}
/* Safari and Chrome: */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
/* Opera: */
#div1 {-o-transition-timing-function: linear;}
#div2 {-o-transition-timing-function: ease;}
#div3 {-o-transition-timing-function: ease-in;}
#div4 {-o-transition-timing-function: ease-out;}
#div5 {-o-transition-timing-function: ease-in-out;}
.trans_box:hover div
{
width:500px;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"transBox"
class
=
"trans_box"
>
<
div
id
=
"div2"
style
=
"top:150px"
>ease<
br
>(default)</
div
>
<
div
id
=
"div3"
style
=
"top:200px"
>ease-in</
div
>
<
div
id
=
"div4"
style
=
"top:250px"
>ease-out</
div
>
<
div
id
=
"div5"
style
=
"top:300px"
>ease-in-out</
div
>
<
div
id
=
"div1"
style
=
"top:100px"
>linear</
div
>
</
div
>
</
body
>
</
html
>
|
2，为过渡增加延时
过渡属性还可以添加一个可选的延时，用以将过渡的开始推迟一段时间。下面是一个等待1秒的例子。
延时1秒
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!doctype html>
<
html
lang
=
"en"
>
<
head
>
<
title
>hangge.com</
title
>
<
style
>
.trans_box3 {
padding: 20px;
*zoom:1;
}
.trans_box3 div{
width:100px;
height:50px;
background:#2D9900;
color:white;
font-weight:bold;
-webkit-transition: all 2s ease-out 1s;
-moz-transition: all 2s ease-out 1s;
-o-transition: all 2s ease-out 1s;
transition: all 2s ease-out 1s;
}
.trans_box3:hover div
{
width:500px;
}
</
style
>
</
head
>
<
div
class
=
"trans_box3"
>
<
div
>延时1秒</
div
>
</
div
>
</
html
>
|
原文出自：www.hangge.com 转载请保留原文链接：https://www.hangge.com/blog/cache/detail_988.html