1. 影片
影片（animation）是CSS3中具有顛覆性的特征之一，可以通過設定都各節點來精確控制一個或一組影片，常用來實作復雜的影片效果，
相比較過度，影片可以實作更多變化，更多控制，連續自動播放等效果，
1.1 影片的基本使用
制作影片分為兩步：
（1）先定義影片，
（2）再使用（呼叫）影片，
1.1.1 用Keyframes定義影片（類似定義類選擇器）
@keyframes 影片名稱 {
0% {
width: 100px;
}
100% {
width: 200px;
}
}
影片序列
（1）0%是影片的開始，100%是影片的完成，這樣的規則就是影片序列，
（2）在@keyframes中規定某項CSS樣式，就能創建由當前樣式逐漸改為新樣式的影片效果，
（3）影片是使元素從一種樣式逐漸變化為另一種樣式的效果，可以改變任意多的樣式任意多的次數，
（4）用百分比來規定變化發生的時間，或用關鍵詞“from”和“to”，等同于0%和100%，
1.1.2 元素使用影片
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/*呼叫影片*/
animation-name: 影片名詞；
/*持續時間*/
animation-duration: 持續時間；
}
|
屬性 |
描述 |
|
@keyframes |
規定影片， |
|
animation |
所有影片屬性的簡寫屬性，除了animation-play-state屬性， |
|
animation-name |
規定@keyframes影片的名稱，（必須的） |
|
animation-duration |
規定影片完成一個周期所花費的秒或毫秒，默認是0，（必須的） |
|
animation-timing-function |
規定影片的速度曲線，默認是“ease”， |
|
animation-delay |
規定影片何時開始，默認是0， |
|
animation-iteration重復的-count次數 |
規定影片被播放的次數，默認是1，還有infinite無限， |
|
animation-direction |
規定影片是否在下一周期逆向播放，默認是“normal”，alternate逆播放， |
|
animation-play-state |
規定影片是否正在運行或暫停，默認是“running”，還有“pause”， |
|
animation-fill-mode |
規定影片結束后狀態，保持forwards,回到起始backwards， |
1.1.3 影片簡寫屬性
animation：影片名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 影片起始或者結束的狀態;
| animation: myfirst 5s linear 2s infinite alternate; |
注意：
（1）簡寫屬性里面不包括animation-play-state，
（2）暫停影片：animation-play-state: puased;經常和滑鼠進過等其他配合使用，
（3）想要影片走起來，而不是直接跳回來：animation-direction: alternate;
（4）盒子影片結束后，停在結束位置：animation-fill-mode: forwards;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/553449.html
標籤：Html/Css
上一篇：misc刷題
下一篇：返回列表