经过测试和研究，关于四者的区别，大概懂了，写出来供大家看看。如有不对，请指出。

对代码做一些调整后，有利于观察：

将初始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

关注问题我要回答

1688

操作

收起

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 回复有任何疑惑可以回复我~