css3 序列帧动画抖动

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

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

html

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

style

使用媒体查询兼容PC端

// 两人工作
.work_two_main{
  width: 375px;
  height: 367.5px;
  margin: 0 auto;
  background: url('./../assets/images/person/work_two.png') 0 0 no-repeat; 
  background-size: 8625px 367.5px; 
  animation: step2 1.5s steps(23) infinite;
}
@keyframes step2 {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -8625px 0;
    }
}
// 兼容pc
@media screen and (min-width: 540px) {
    .work_two_main{
        width: 375px;
        height: 367.5px;
        margin: 0 auto;
        background: url('./../assets/images/person/work_two.png') 0 0 no-repeat; 
        background-size: 8625px 367.5px; 
        animation: step2 1.5s steps(23) 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

转载于:https://www.cnblogs.com/1032473245jing/p/10529856.html