文章目錄
- 一、基本用法
-
- 1.關鍵幀@keyframes
- 2.示例
- 二、常見錯誤及解決方案
-
- （1）@keyframes 不能實作突變的狀态變化
-
- display替代方案
-
- 1.占據空間：visiblity
- 2.不想占據空間：絕對定位+visiblity
- 3.消失前占據空間但是消失後不占據空間：timeout和visiblity
- （2）@keyframes會增添/覆寫屬性
一、基本用法
CSS3 動畫
動畫：指定一組或多組成套的動作，按照指定時間，指定的方式自動完成。
h5中動畫的運用效率要高于使用js來展現動畫效果，因為動畫是渲染式的。
1.關鍵幀@keyframes
@keyframes
通過在動畫序列中定義關鍵幀的樣式，來控制CSS動畫序列中的步驟。
使用
@keyframes
可以建立動畫。
在動畫過程中，您可以更改CSS樣式的設定多次。
指定的變化時發生時使用％，或關鍵字“from”和“to”，等價于0％到100％
0％是開頭動畫，100％是當動畫完成。
如
@keyframes mycolor {
0% { background-color: red; }
30% { background-color: darkblue; }
50% { background-color: yellow; }
70% { background-color: darkblue; }
100% { background-color: red; }
}
1) animation-name：動畫名稱 指定了一個 @keyframes 動畫，指定要使用哪一個關鍵幀。
2) animation-duration：動畫持續時間 定義動畫完成一個周期需要多少秒或毫秒。
3) animation-timing-function：動畫的運動方式 指定動畫将如何完成一個周期
ease;預設
ease-in;
ease-out;
ease-in-out;
linear;
steps(數值, 定位) 定位：start/end 預設end指逐漸運動
4) animation-delay：動畫的延遲時間 動畫什麼時候開始。
5) animation-iteration-count：動畫循環次數 動畫應該播放多少次，預設1
其值為：n（一個數字，指定播放多少次）、infinite（指定播放無限次）、
6)animation-fill-mode：結束狀态 設定動畫結束時盒子的狀态
forwards 保持動畫結束後的狀态
backwards 動畫結束後回到最初的狀态
7) animation-direction：動畫的執行順序 動畫是否應該播放完後逆向交替循環（對設定了多次播放的動畫有效）
其值為：normal（預設值，動畫正常）、reverse 反向、alternate（動畫交替循環逆向運動）
8) 簡寫方式
animation: 動畫執行時間 延遲時間 執行關鍵幀名稱 運動方式 運動次數 結束狀态 動畫執行順序;
最簡方式
animation: 動畫執行時間 執行關鍵幀名稱;
執行時間和延遲時間順序不可調整
2.示例
播放兩次時長為5s的變色（紅->黃->綠->h紅）動畫，結束。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<style>
div {
width: 200px;
height: 200px;
background: red;
}
@keyframes mycolor {
0% { background-color: red; }
30% { background-color: yellow; }
60% { background-color: green; }
100% { background-color: red; }
}
div:hover {
animation-name: mycolor;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: 2;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
二、常見錯誤及解決方案
（1）@keyframes 不能實作突變的狀态變化
@keyframes
的原理是把樣式的從一個狀态，慢慢轉變為另一個狀态。
是以，如果不存在漸變的狀态，是無法用@keyframes構成動畫的，例如：
div {
animation: appear 2s;
}
@keyframes appear {
from { display:none; }
to { display:block;}
}
display:none;是将div消失并且不占空間，display:block;則是将div展現存在并占據空間。
但是 display:none;和display:block;是突變的 ，是以@keyframes無法實作。
同理其他種類的突變屬性也無法擁有@keyframes的動畫效果，@keyframes 隻存在于漸變屬性當中，例如各種width, height, opacity等屬性值為數值的屬性。
display替代方案
1.占據空間：visiblity
@keyframes appear {
100% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
2.不想占據空間：絕對定位+visiblity
使用絕對定位使元素脫離文檔流，搭配z-index控制層疊關系使它出現或者消失。
//自身css效果
.animate {
position: absolute;
top: 0;
left: 0;
transition: 1s;
opacity: 0;
visibility: hidden;
z-index: 0;
}
//出現時的效果
.cur {
opacity: 1;
visibility: visible;
z-index: 10;
}
3.消失前占據空間但是消失後不占據空間：timeout和visiblity
（2）@keyframes會增添/覆寫屬性
/*
* div 在2s内下移200px
*/
div {
position:absolute;
top:0px;
animation: move 2s;
}
@keyframes move {
from { top:20px; }
to { top:200px;}
}
此例中，div初始狀态是
top:0;
。
@keyframes首先用
top:20px
覆寫原屬性（top:0;），然後再啟動@keyframes功能。
結果：div突然瞬間下降20px，然後在2秒内下降至指定位置（top:200px;）
![css中display屬性inline,block,inline-block詳解[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)