动画的最终结果是停留在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; } }
写错 是状态