1 @keyframes規則
@keyframes 規則用于創建動畫。在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。
2 css3 動畫
在 @keyframes 中創建動畫時，請把它捆綁到某個選擇器，否則不會產生動畫效果。
通過規定至少以下兩項 CSS3 動畫屬性，即可將動畫綁定到選擇器：
? ? 一 ?規定動畫的名稱
? ? 二 ?規定動畫的時長
div {
? width: 200px;
?height: 200px;
? margin: 100px;
? background-color: yellow;
? animation: div 5s
}
@keyframes div {
? from {background-color: yellow}/*從*/
? to {background-color: red}/*到*/
}
運行效果
運行圖
頁面刷新后事件從初始狀態在規定時間內完成事件，后返回初始事件
必須定義動畫的名稱和時長。如果忽略時長，則動畫不會允許，因為默認值是 0
3 什么是 CSS3 中的動畫
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。您可以改變任意多的樣式任意多的次數
請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同于 0% 和 100%。0% 是動畫的開始，100% 是動畫的完成
div {
? width: 50px;
? height: 50px;
? position: relative;
? background-color: yellow;
? animation: div 5s
}
@keyframes div {
? 0% {background-color: yellow; left: 0; top: 0}
? 50% {background-color: red; left: 100px; top: 100px}
? 100% {background-color: #000; left: 200px; top: 100px}
}
運行效果
左圖為初始圖（0%） 中圖為運行過程圖（0%~50%）右圖為運行到結束圖（50%~100%） ?運行結束后事件回歸初始值
4? 動畫屬性
@keyframes 規定動畫。
animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name 規定 @keyframes 動畫的名稱。
animation-duration 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。
animation-timing-functior 規定動畫的速度曲線。默認是 "ease"。
animation-delay 規定動畫何時開始。默認是 0。
animation-iteration-count 規定動畫被播放的次數。默認是 1。
animation-direction 規定動畫是否在下一周期逆向地播放。默認是 "normal"。
animation-play-state 規定動畫是否正在運行或暫停。默認是 "running"。
animation-fill-mode 規定對象動畫時間之外的狀態。
div {
? width: 50px;
? height: 50px;
? position: relative;
? background-color: yellow;
? animation-name: div;
? animation-duration: 1s;
? animation-timing-function: linear;
? animation-iteration-count: infinite;
? animation-direction: alternate;
? animation-play-state: running;
/*以上代碼可簡寫為：
animation: div 1s linear infinite alternate */
}
@keyframes div {
? 0% {background-color: yellow; left: 0; top: 0}
? 10% {background-color: red; left: 100px; top: 0}
? 20% {background-color: #000; left: 100px; top: 100px}
? 40% {background-color: red; left: 200px; top: 100px}
? 50% {background-color: #000; left: 200px; top: 200px}
? 60% {background-color: yellow; left: 300px; top: 300px}
? 70% {background-color: red; left: 100px; top: 300px}
? 80% {background-color: red; left: 200px; top: 400px}
? 90% {background-color: red; left: 0; top: 400px}
? 100% {background-color: #000; left: 0; top: 0}
}
