移动端无缝循环背景动画问题与解决

本文主要介绍了如何使用CSS动画技术实现一张图片在HTML元素上从左向右进行无缝、无限循环移动的需求。在移动端开发中，开发者遇到的一个问题是当使用rem作为单位时，动画在移动端的表现与PC端存在差异。具体问题表现为图片移动速度不一致以及动画无法实现无缝滚动。 在HTML部分，有一个名为`.dog`的div元素，用于承载背景图片： ```html <div class="dog"></div> ``` CSS代码中定义了图片的宽度、高度、背景图片、尺寸以及初始背景位置，并设置了动画效果： ```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; } } ``` 动画名为`run`，设置了一个2秒线性动画，重复次数设为无限。 问题在于，当在移动端执行这段代码时，由于可能是因为动态计算的font-size导致图片移动速度不一致，图片无法实现无缝滚动。尽管在PC端运行正常，但在移动设备上，这种基于rem单位的动画计算可能会受到影响。 为了解决这个问题，作者采取了JavaScript的解决方案。通过`$(document).ready()`函数确保在页面加载完成后，调用`remReSize()`函数调整可能的font-size影响，然后使用`setTimeout`在一定延迟后添加动画效果，以便在图片尺寸稳定后再启动动画，从而实现预期的无缝无限循环： ```javascript $(document).ready(function() { remReSize(); setTimeout(function() { $('.dog').css('animation', 'run 2s linear infinite'); }, 0); }); ``` 通过这种方式，开发者可以在移动端实现所需的背景图片无缝无限循环动画，尽管这涉及到浏览器对rem单位处理的复杂性，但通过合理的JavaScript控制，可以避免不必要的视觉问题。