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