css3 序列帧动画抖动

页面需要一个动画，设计师给了动画的序列帧

项目由vue构建，使用css3做动画

html

<div class="work_two_main"></div>

style

使用媒体查询兼容PC端

// 两人工作
.work_two_main{
  width: 375px;
  height: .5px;
  margin:  auto;
  background: url('./../assets/images/person/work_two.png')   no-repeat;
  background-size: 8625px .5px;
  animation: step2 .5s steps() infinite;
}
@keyframes step2 {
    % {
        background-position:  ;
    }
    % {
        background-position: -8625px ;
    }
}
// 兼容pc
@media screen and (min-width: 540px) {
    .work_two_main{
        width: 375px;
        height: .5px;
        margin:  auto;
        background: url('./../assets/images/person/work_two.png')   no-repeat;
        background-size: 8625px .5px;
        animation: step2 .5s steps() infinite;
        transform: scale(1.4); // 兼容pc
    }
}

注意

在网上查询资料后发现抖动有可能由rem引起，将rem修改为px后依然有抖动。

请大家指点下，谢谢大家。

参考资料http://www.yyyweb.com/4993.html后下载此demo，将图片修改为项目图片，发现页面仍然抖动，找设计师修改图片后仍然抖动。

参考资料https://blog.csdn.net/u011423258/article/details/82378992使用媒体查询兼容PC端。

https://aotu.io/notes/2016/05/17/css3-animation-frame/index.html

http://www.yyyweb.com/4993.html