動畫
實現步驟
- 定義動畫
@keyframes 動畫名稱{
? from{}
? to{}
}
@keyframes 動畫名稱{
? 0%{}
? 10%{}
? ....
? 100%{}
}
? ??
? ? ?2.使用動畫
animation:動畫名稱? 動畫花費時間;
示例：盒子的寬度從200變到400px，兩個狀態一般用from to的形式
<style>.box {width: 200px;height: 100px;background-color: pink;animation: change 2s;}@keyframes change {from {width: 200px;}to {width: 400px;}}</style>
</head><body><div class="box"></div>
</body>多個狀態變化：
<style>.box {width: 200px;height: 100px;background-color: pink;animation: change 2s;}@keyframes change {10% {width: 200px;}50% {width: 400px;}100% {width: 800px;}}</style>
</head><body><div class="box"></div>
</body>animation屬性
animation是復合屬性，包括：
animation: 動畫名稱 動畫時長 速度曲線 延遲時間 重復次數 動畫方向 執行完畢時狀態
注意：
- 動畫名稱和動畫時長必須賦值
- 取值不分先后順序
- 如果有兩個時間值，第一個時間表示動畫時長，第二個時間表示延遲時間
同時也可以拆分成多個屬性
| 屬性 | 作用 | 取值 |
|---|---|---|
| animation-name | 動畫名稱 | |
| animation | 動畫時長 | |
| animation | 延遲時間 | |
| animation | 動畫執行完畢時狀態 | forwards:最后一幀狀態? backwards:第一幀狀態 |
| animation | 速度曲線 | step(數字)：逐幀動畫 |
| animation | 重復次數 | infinite為無限循環 |
| animation | 動畫執行方向 | alternate為反向 |
| animation | 暫停動畫 | paused為暫停，通常配合hover使用 |
?
)
![BUUCTF[堆][of_by_one]](http://pic.xiahunao.cn/BUUCTF[堆][of_by_one])
)
