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

首页课程实战体系课手记专栏慕课教程

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

来源：9-9 CSS3中设置动画时间外属性

Sharon_zd

2015-06-28 23:16

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

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

写回答关注

10回答

finalfi

2015-09-04 22:35:25

已采纳

backwards时候，并非延迟不管用了，而是在应用第一帧之后，才延迟

1 6

Sharon...

现在才回头看，的确如此。thanks

2018-04-16 21:51:26

共 1 条回复 >
南孩北调

2016-07-24 15:41:28

已验证，第三条确实是在应用地一帧后，延迟3s，其他的没错。

0 0
Helianthuserin

2016-03-07 22:53:57

谢谢~！！

0 0
拜仁慕尼黑

2016-01-17 14:18:47

懂了~感谢！

0 0
你看到我的小熊了吗

2015-10-29 20:28:12

讲的很好

0 0

赵铁柱: 2015-09-25 03:08:48

第三点是错的，纠正一下，后面同学可以自己测试，

给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; */
  
}

2 0

南孩北调

如果你设置的是backwards,而且延迟时间设置的太长，则第一帧过后，开始延迟，这时就看不到动画。

2016-07-24 15:44:59

共 2 条回复 >