对代码做一些调整后，有利于观察：
将初始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。
backwards时候，并非延迟不管用了，而是在应用第一帧之后，才延迟
已验证，第三条确实是在应用地一帧后，延迟3s，其他的没错。
谢谢~！！
懂了~感谢！
讲的很好
第三点是错的，纠正一下，后面同学可以自己测试，
给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; */
}讲得很透彻
思路很清晰
讲的很好
。感谢