一.Animation 動畫
1. 含義
CSS3 的 animation 是通過關鍵幀的形式做出來的。使用時常結合 transform 屬性進行製作。
2.animation 語法
animation 屬性是一個簡寫屬性，用於設定下方六個動畫屬性；
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
| 值 | 描述 |
|---|---|
| name | 需要繫結到選擇器 keyframes 的名稱 |
| duration | 規定需要完成動畫的時間 |
| timing-function | 規定動畫的速度曲線 |
| delay | 規定動畫開始前的延遲時間 |
| iteration-count | 規定動畫應該執行的次數 |
| direction | 規定是否輪流方向播放動畫 |
| fill-mode | 規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式 |
| play-state | 指定動畫是否正在執行或已暫停 |
接下來將分析每個屬性的取值：
1. timing-function 屬性
| 值 | 描述 |
|---|---|
| linear | 動畫從頭到尾的速度是一致的 |
| ease | 預設，開始時慢，慢慢加速，結束前減速 |
| ease-in | 低速開始 |
| ease-out | 低速結束 |
| ease-in-out | 低速開始結束 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函式中自己的值。可能的值是從 0 到 1 的數值。 |
2.iteration-count
| 值 | 描述 |
|---|---|
| <number> | 動畫播放次數為 n,可以為小數 |
| infinite | 動畫播放迴圈 |
3.direction
| 值 | 描述 |
|---|---|
| normal | 預設，動畫正常播放 |
| alternate | 動畫在奇數次（1、3、5...）正向播放，在偶數次（2、4、6...）反向播放。 |
| reverse | 反向播放 |
| alternate-reverse | 動畫在奇數次（1、3、5...）反向播放，在偶數次（2、4、6...）正向播放。 |
4.fill-mode
| 值 | 描述 |
|---|---|
| none | 預設值，動畫在動畫執行之前和之後都不會運用任何樣式到目標元素上 |
| forwards | 目標保持動畫最後一幀的樣式，最後一幀是哪個取決於animation-direction和 animation-iteration-count |
| backwards | 動畫採用相應第一幀的樣式，保持 animation-delay |
| both | 動畫將會執行 forwards 和 backwards 執行的動作 |
5.play-state
| 值 | 描述 |
|---|---|
| running | 當前動畫正在執行 |
| paused | 當前動畫已被停止 |
3.補充 transform 的屬性
具體屬性可以參考 www.w3school.com.cn/cssref/pr_t…
4.實戰
該例項實現繞圈動畫
- html 程式碼
<div class="mainBox">
<div class="sun">
<img src="../image/1.jpg">
</div>
<div class="earth">
<img src="../image/1.jpg">
</div>
</div>
複製程式碼- CSS 程式碼
.mainBox {
position: relative;
width: 600px;
height: 600px;
}
.sun {
position: absolute;
width: 100px;
height: 100px;
top: 250px;
left: 250px;
}
.mainBox img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.earth {
position: absolute;
width: 100px;
height: 100px;
top: 250px;
left: 450px;
transform-origin: -150px 50px;
animation: rotate 5s linear forwards;
}
@keyframes rotate {
to {
transform: rotate(360deg)
}
}
複製程式碼- 效果
結合 clip-path 做動畫
介紹clip-path 是用來裁剪的，如對一個 div 應用 clip-path:circle(40% at 50% 50%),意為裁剪一個半徑為 40%，圓心在(50%，50%) 位置的一個圓；使用 clip-circle 可用來做一些形狀變化的動畫
clip-path 實戰
- html 程式碼
<div class="imgBox">
<img src="../image/1.jpg">
</div>
複製程式碼- CSS 程式碼
.imgBox img {
clip-path: circle(10% at 50% 50%);
transition: clip-path 8s ease-in-out;
}
.imgBox img:hover {
clip-path: circle(40% at 50% 50%)
}
複製程式碼- 效果