動(dòng)畫是CSS3中新增功能，CSS3中動(dòng)畫分為兩種，分別是transitions和animations，transitions實(shí)現(xiàn)的動(dòng)畫是從一種屬性值從一個(gè)值到另外一個(gè)值的動(dòng)畫效果，而animations可實(shí)現(xiàn)不止兩個(gè)值的動(dòng)畫效果，即更加復(fù)雜的動(dòng)畫。以背景顏色舉例，transitions只能實(shí)現(xiàn)背景色從一種顏色到另外一種顏色的動(dòng)畫效果，而animations通過關(guān)鍵幀能實(shí)現(xiàn)從顏色1過渡到顏色2，然后過渡到顏色3....的動(dòng)畫效果。
transitions動(dòng)畫
首先，看一下個(gè)瀏覽器對(duì)transitions的支持情況：
transitions包含的屬性有：transition-property、transition-duration、transition-timing-function、transition-delay。
transition-property：設(shè)置動(dòng)畫效果的css屬性名稱，默認(rèn)值為all；
transition-duration：動(dòng)畫持續(xù)時(shí)間，單位為秒或毫秒，默認(rèn)值為0；
transition-timing-function：動(dòng)畫效果的速度曲線，默認(rèn)值為ease；
transition-delay：動(dòng)畫延遲多久開始執(zhí)行，默認(rèn)值為0；
可將這四個(gè)屬性簡(jiǎn)寫成transition屬性:
transition: property duration timing-function delay;如果需要同時(shí)對(duì)多個(gè)屬性設(shè)置動(dòng)畫，可用逗號(hào)進(jìn)行分隔。例如transition：color 1s ease, background-color 1s ease;
animations動(dòng)畫
前面提到，animation是通過關(guān)鍵幀實(shí)現(xiàn)動(dòng)畫效果的，那么首先說明一下關(guān)鍵幀，關(guān)鍵幀就是動(dòng)畫效果中的節(jié)點(diǎn)，然后在各個(gè)節(jié)點(diǎn)間順序進(jìn)行平滑過渡。使用@keyframes 定義關(guān)鍵幀集合，其格式如下：
@keyframes 關(guān)鍵幀集合名 {
? ? ? ? 關(guān)鍵幀代碼
}
仍然使用背景顏色舉例說明，如果想實(shí)現(xiàn)背景色從紅色變成綠色，然后變成藍(lán)色，最后再變成紅色的動(dòng)畫效果，代碼如下：
@keyframes myColor {
? ? ? ? 0% {
? ? ? ? ? ? ? ? background-color: #ff0000;
? ? ? ? }
? ? ? ? 40%{
? ? ? ? ? ? ? ? background-color: #00ff00;
? ? ? ? }
? ? ? ? 70%{
? ? ? ? ? ? ? ? background-color:#0000ff;
? ? ? ? }
? ? ? ? 100%{
? ? ? ? ? ? ? ? background-color: #ff0000;
? ? ? ? }
}
myColor關(guān)鍵幀集合中定義了4個(gè)關(guān)鍵幀，0%為開始幀，100%為結(jié)束幀，40%表示動(dòng)畫過程執(zhí)行到40%時(shí)的狀態(tài)，70%類似。如果想用自定義的關(guān)鍵幀集合實(shí)現(xiàn)動(dòng)畫效果，需要將關(guān)鍵幀應(yīng)用到animations動(dòng)畫上，animations動(dòng)畫包含屬性animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state等。
animation-name：動(dòng)畫名稱，即關(guān)鍵幀集合名；
animation-duration：動(dòng)畫持續(xù)時(shí)間，默認(rèn)值為0；
animation-timing-function：動(dòng)畫的速度曲線，默認(rèn)值為ease；
animation-delay：動(dòng)畫延遲多久開始執(zhí)行，默認(rèn)值為0；
animation-iteration-count：動(dòng)畫循環(huán)次數(shù)，默認(rèn)值為1，如果值為infinite，則表示動(dòng)畫無限次循環(huán)；
animation-direction：定義是否循環(huán)交替反向播放動(dòng)畫。如果animation-iteration-count值為1，則該屬性不起作用。默認(rèn)值為normal，即正常播放；如果取值reverse，則表示反向播放；如果取值alternate，則動(dòng)畫在奇數(shù)次正向播放，在偶數(shù)次反向播放；如果取值alternate-reverse，則動(dòng)畫在奇數(shù)次反向播放，在偶數(shù)次正向播放。
animation-play-state：定義動(dòng)畫是否正在運(yùn)行或者已暫停，默認(rèn)值為running，paused表示動(dòng)畫暫停。
