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
이
삼
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