1 @keyframes規(guī)則
@keyframes 規(guī)則用于創(chuàng)建動(dòng)畫醋拧。在 @keyframes 中規(guī)定某項(xiàng) CSS 樣式呜魄，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動(dòng)畫效果。
2 css3 動(dòng)畫
在 @keyframes 中創(chuàng)建動(dòng)畫時(shí)仲智，請(qǐng)把它捆綁到某個(gè)選擇器屡萤，否則不會(huì)產(chǎn)生動(dòng)畫效果。
通過規(guī)定至少以下兩項(xiàng) CSS3 動(dòng)畫屬性贫堰，即可將動(dòng)畫綁定到選擇器：
? ? 一 ?規(guī)定動(dòng)畫的名稱
? ? 二 ?規(guī)定動(dòng)畫的時(shí)長
div {
? width: 200px;
?height: 200px;
? margin: 100px;
? background-color: yellow;
? animation: div 5s
}
@keyframes div {
? from {background-color: yellow}/*從*/
? to {background-color: red}/*到*/
}
運(yùn)行效果
運(yùn)行圖
頁面刷新后事件從初始狀態(tài)在規(guī)定時(shí)間內(nèi)完成事件穆壕，后返回初始事件
必須定義動(dòng)畫的名稱和時(shí)長。如果忽略時(shí)長其屏，則動(dòng)畫不會(huì)允許喇勋，因?yàn)槟J(rèn)值是 0
3 什么是 CSS3 中的動(dòng)畫
動(dòng)畫是使元素從一種樣式逐漸變化為另一種樣式的效果。您可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)
請(qǐng)用百分比來規(guī)定變化發(fā)生的時(shí)間偎行，或用關(guān)鍵詞 "from" 和 "to"川背，等同于 0% 和 100%。0% 是動(dòng)畫的開始蛤袒，100% 是動(dòng)畫的完成
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}
}
運(yùn)行效果
左圖為初始圖（0%） 中圖為運(yùn)行過程圖（0%~50%）右圖為運(yùn)行到結(jié)束圖（50%~100%） ?運(yùn)行結(jié)束后事件回歸初始值
4? 動(dòng)畫屬性
@keyframes 規(guī)定動(dòng)畫渗常。
animation 所有動(dòng)畫屬性的簡寫屬性，除了 animation-play-state 屬性汗盘。
animation-name 規(guī)定 @keyframes 動(dòng)畫的名稱。
animation-duration 規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒询一。默認(rèn)是 0隐孽。
animation-timing-functior 規(guī)定動(dòng)畫的速度曲線。默認(rèn)是 "ease"健蕊。
animation-delay 規(guī)定動(dòng)畫何時(shí)開始菱阵。默認(rèn)是 0。
animation-iteration-count 規(guī)定動(dòng)畫被播放的次數(shù)缩功。默認(rèn)是 1晴及。
animation-direction 規(guī)定動(dòng)畫是否在下一周期逆向地播放。默認(rèn)是 "normal"嫡锌。
animation-play-state 規(guī)定動(dòng)畫是否正在運(yùn)行或暫停虑稼。默認(rèn)是 "running"。
animation-fill-mode 規(guī)定對(duì)象動(dòng)畫時(shí)間之外的狀態(tài)势木。
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}
}
