这个链接详细介绍了帧动画的一些基本知识:https://www.cnblogs.com/rqqd/p/7998886.html
有的帧动画是infinite的,所有设置start,end,backwards,forwards没啥影响,
但有时候需要帧动画只执行一次,并且停留在最后一帧,刚开始搜到的是说设置forwards就可以,其实不是,还与设置的stes动画有关,这里确实要设置forwards,但是ox11里面就不能是:
@keyframes ox11 {
0% {
background-position: 0 0;
}
100% {
background-position: -280vw 0;
}
}
而是:
.animate11 {
background-size: 280vw 50vw ;
background-image: url(' ');
animation: ox11 6s steps(4, end) 1000ms 1 normal forwards;
}
@keyframes ox11 {
0% {
background-position: 70vw 0;
}
100% {
background-position: -210vw 0;
}
}
这样才能保证是停留在最后一帧。