CSS Transition
Transition(轉場/過渡)是通過定義元素(Element) 開始 和 結束 的狀態，中間自動補上動畫機制，相當於簡化版的Animation。
由於這篇不會有太多的解釋，如果想更深入瞭解可以看我的第一篇文章 CSS輕鬆玩(1)-Animation-就決定是你了！皮卡丘！
Transition 屬性介紹
| 屬性 |
介紹 |
| transition-property |
定義哪些 CSS properties 會被轉場效果影響。除了這些被你特別指出的 property 名單，其他的轉場一如以往的會在瞬間完成。 |
| transition-duration |
定義轉場所花費的時間。你可以只定義一個時間給所有 property 使用，也可以給定多組不同時間。 |
| transition-timing-function |
設定轉場時所依據的貝茲曲線。 |
| transition-delay |
定義多久之後開始發生轉場。 |
和Animation一樣，我們通常只記一種最簡單的寫法(其中至少一定要寫 property、duration):
1
| transition: property duration timing-function delay;
|
例如: 我們希望transition改變寬度(width)和背景顏色(background-color)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .demo1 {
width: 200px;
height: 200px;
border: 1px solid #ccc;
background: #fa0;
margin: 20px auto;
transition: width 1s, background-color 3s;
}
.demo1:hover {
width: 100%;
background-color: #000;
color: #fff;
}
|
Demo1
或是來個酷炫的3D旋轉
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .demo2 {
width: 200px;
height: 200px;
border: 1px solid #ccc;
background: #fa0;
margin: 20px auto;
transition: all 3s;
}
.demo2:hover {
transform: perspective(200px) rotate3D(1,1,0,90deg);
background: #000;
color: #fff;
}
|
Demo2: 3D旋轉
常用效果
Item1
Item2
Item3
Item4
Item5
Item6
程式碼附上
HTML:
1
2
3
4
5
6
| <div class="demo3 item1">Item1</div>
<div class="demo3 item2">Item2</div>
<div class="demo3 item3">Item3</div>
<div class="demo3 item4">Item4</div>
<div class="demo3 item5">Item5</div>
<div class="demo3 item6">Item6</div>
|
CSS:
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
| .demo3 {
color: red;
width: 200px;
position: relative;
margin: 20px auto;
font-size: 20px;
z-index: 5;
text-align: center;
transition: all 1s;
box-shadow: 0 0 1px #aaa;
}
.demo3:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: all 1s;
}
.item1:before {
transform: scaleX(0);
border-bottom: 1px solid red;
}
.item1:hover:before {
transform: scaleX(1);
}
.item2:before {
border-bottom: 1px solid red;
width: 0%;
}
.item2:hover:before {
width: 100%;
}
.item3:hover {
transform: scale(2);
}
.item4:hover {
transform: rotateY(360deg);
}
.item5 {
opacity: 0;
}
.item5:hover {
opacity: 1;
}
.item6:hover {
transform: translate(100px)
}
|
↓↓↓ 如果喜歡我的文章，可以幫我按個Like！ ↓↓↓
>> 或者，請我喝杯咖啡，這樣我會更有動力唷！ <<<
街口支付
街口帳號: 901061546