經過測試和研究，關于四者的區別，大概懂了，寫出來供大家看看。如有不對，請指出。

對代碼做一些調整后，有利于觀察：

將初始background設置為orange，姑且把這一幀叫做初始幀
動畫里面的red為第一幀，blue為最后一幀。
將duration調短為5s，將delay調長為3s。

下面就可以開始試了：

1. none：從初始幀orange開始，延遲3s后開始播放動畫 red-->blue，動畫完成后，跳回到初始幀orange。

2. forwards：從初始幀orange開始，延遲3s后開始播放動畫 red-->blue，動畫完成后，留在最后一幀blue.

3. backwards : 也是從初始幀orange開始，但是由于會迅速應用動畫的第一幀，立馬就閃到了第一幀red，延遲3s。動畫完成后，跳回到初始幀orange。

4. both：同時具有forwards和backwards效果，即擁有forwards動畫結束留在最后一幀blue的效果，也擁有迅速應用動畫的第一幀red的效果。這樣both綜合的效果為：從初始幀orange開始，迅速跳到第一幀red，延遲3s，然后變化到最后一幀blue結束，并留在最后一幀blue。

Sharon_zd

2015-06-28

源自：十天精通CSS3 9-9

關注問題我要回答

1730

操作

收起

10 回答

finalfi 回答被采納 +2 積分
2015-09-04

backwards時候，并非延遲不管用了，而是在應用第一幀之后，才延遲

6 回復有任何疑惑可以回復我~

收起回答

Sharon_zd 提問者

現在才回頭看，的確如此。thanks

2018-04-16 回復有任何疑惑可以回復我~

南孩北調
2016-07-24

已驗證，第三條確實是在應用地一幀后，延遲3s，其他的沒錯。

0 回復有任何疑惑可以回復我~

收起回答

Helianthuserin
2016-03-07

謝謝~！！

0 回復有任何疑惑可以回復我~

收起回答

拜仁慕尼黑
2016-01-17

懂了~感謝！

0 回復有任何疑惑可以回復我~

收起回答

你看到我的小熊了嗎
2015-10-29

講的很好

0 回復有任何疑惑可以回復我~

收起回答

趙鐵柱
2015-09-25

第三點是錯的，糾正一下，后面同學可以自己測試，

給div加上一個hover時變色；
div加一個背景色（選擇動畫中沒有的顏色）：

@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;
??/*注意我這里給背景加了一個黑色*/
}
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;?*/
??
}

0 回復有任何疑惑可以回復我~

收起回答

涂山小狐貍3339196

請問，為什么動畫沒反應了

2016-05-16 回復有任何疑惑可以回復我~

南孩北調

如果你設置的是backwards,而且延遲時間設置的太長，則第一幀過后，開始延遲，這時就看不到動畫。

2016-07-24 回復有任何疑惑可以回復我~