Example of implementing a seamless infinite loop of background using CSS animation

1. Demand

A picture moves from left to right in an infinite loop

2. Code

Since it is applied on mobile devices, rem units are used, and the following problems also occur here.

HTML

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

CSS

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

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

3. Problem

There is no problem on the PC side, but on the mobile side (perhaps due to recalculation of the font size?) you will find that the movement speed is inconsistent with the settings, and the image cannot be seamless.

4. Reasons

Unknown, no relevant information found. It seems that the problem is caused by dynamic calculation of font-size.

5. Solution

After testing, it was found that it is normal to add animation to the image after the file is loaded. So modify the code:

JS

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

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.