CSS動畫實現背景無縫無限循環

原文地址： https://segmentfault.com/a/1190000021458206
做者： Fw惡龍
本文首發於： 思否

1. 需求

一張圖片從左向右無限循環移動

2. 代碼

因爲是應用在移動端，故使用rem單位，後面問題也發生在這。

HTML

<div class="dog"></div>

CSS

.dog {
    width: 5.4rem;                     \\圖片寬度
    height: 3.04rem;                   \\圖片高度
    background-image: url(head.jpg);
    background-size: 5.4rem 3.04rem;   \\圖片寬高
    background-position: -5.4rem 0;
    animation: run 2s linear infinite;
}

@keyframes run {
    from {background-position: -5.4rem 0;}
    to {background-position: 0 0;}
}

3. 問題

在PC端，是沒有問題的，可是在移動端(多是從新計算字體大小致使的？)會發現移動速度與所設置的不一致，而且圖片沒法實現無縫。

4. 緣由

未知，沒找到相關資料，目測是動態計算font-size引發的問題。

5. 解決

通過測試發現如果在文件加載完畢後，給圖片添加上動畫則是正常。故修改代碼：

JS

$(document).ready(function(){
  remReSize();
  setTimeout(function() {
    $('.dog').css('animation', 'run 2s linear infinite');
  }, 0);
});