經(jīng)過測(cè)試和研究，關(guān)于四者的區(qū)別，大概懂了，寫出來供大家看看。如有不對(duì)，請(qǐng)指出。
對(duì)代碼做一些調(diào)整后，有利于觀察：
將初始background設(shè)置為orange，姑且把這一幀叫做初始幀
動(dòng)畫里面的red為第一幀，blue為最后一幀。
將duration調(diào)短為5s，將delay調(diào)長為3s。
下面就可以開始試了：
1. none：從初始幀orange開始，延遲3s后開始播放動(dòng)畫 red-->blue，動(dòng)畫完成后，跳回到初始幀orange。
2. forwards：從初始幀orange開始，延遲3s后開始播放動(dòng)畫 red-->blue，動(dòng)畫完成后，留在最后一幀blue.
3. backwards : 也是從初始幀orange開始，但是由于會(huì)迅速應(yīng)用動(dòng)畫的第一幀，立馬就閃到了第一幀red，延遲3s。動(dòng)畫完成后，跳回到初始幀orange。
4. both：同時(shí)具有forwards和backwards效果，即擁有forwards動(dòng)畫結(jié)束留在最后一幀blue的效果，也擁有迅速應(yīng)用動(dòng)畫的第一幀red的效果。這樣both綜合的效果為：從初始幀orange開始，迅速跳到第一幀red，延遲3s，然后變化到最后一幀blue結(jié)束，并留在最后一幀blue。
2015-09-04
backwards時(shí)候，并非延遲不管用了，而是在應(yīng)用第一幀之后，才延遲
2016-07-24
已驗(yàn)證，第三條確實(shí)是在應(yīng)用地一幀后，延遲3s，其他的沒錯(cuò)。
2016-03-07
謝謝~！！
2016-01-17
懂了~感謝！
2015-10-29
講的很好
2015-09-25
第三點(diǎn)是錯(cuò)的，糾正一下，后面同學(xué)可以自己測(cè)試，
給div加上一個(gè)hover時(shí)變色；
div加一個(gè)背景色（選擇動(dòng)畫中沒有的顏色）：
@keyframes?redToBlue{ ??from{ ????background:?red; ??} ??20%{ ??????background:green; ??} ??40%{ ??????background:lime; ??} ??60%{ ??????background:yellow; ??} ??to{ ????background:blue; ??} } div?{ ??width:?200px; ??height:?200px; ??background:?red; ??margin:?20px?auto; ??background:black; ??/*注意我這里給背景加了一個(gè)黑色*/ } div:hover{ ???? ????animation-name:redToBlue; ??animation-duration:?3s; ??animation-timing-function:?ease; ??animation-delay:?2s; ??animation-fill-mode:none; ??/*animation-fill-mode:forwards;*/ ??/*animation-fill-mode:backwards;*/ ??/*animation-fill-mode:both;?*/ ?? }2015-09-08
2015-08-26
思路很清晰
2015-08-09
講的很好
2015-07-26
。感謝