动画的最终结果是停留在100%的状态还是最初定义的状态呢?
回到最初设置,也就是div设置状态
设置停留状态用这个animation-fill-mode
animation-fill-mode:forwards; 设置为动画结束状态
animation-fill-mode:backwards; 设置为动画开始状态
是还原到动画之前的颜色,并不是0%{}时设定的颜色
最终状态还是变成最初始的状态,很简单测验一下,就是你吧案例的的100%时背景色改成黑色,你会发现动画到变成黑色之后,又变回红色(即最初的颜色)。
@keyframes changecolor{
0%{
background: red;
}
20%{
background:blue;
}
40%{
background:orange;
}
60%{
background:green;
}
80%{
background:yellow;
}
100%{
background: black;
}
}写错 是状态