帧动画停在最后一帧

这个链接详细介绍了帧动画的一些基本知识: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;
  }
}

这样才能保证是停留在最后一帧。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容