question The seamless scrolling of pictures and texts has a generally good effect on mobile phones, but the pictures will shake terribly on some mobile browsers! Wrong writing You cannot use left or margin-left, like this: .donghua.active{ animation: scoll ease-in-out 1s infinite alternate; -webkit-animation: scoll ease-in-out 1s infinite alternate; } @keyframes scoll { from { left: 0; } to { left: -353px; } } -webkit-@keyframes scoll { from { left: 0; } to { left: -353px; } } Workaround An element in it will shake terribly on mobile phones. Use 2D translate like this: .donghua.active{ animation: scoll ease-in-out 1s infinite alternate; -webkit-animation: scoll ease-in-out 1s infinite alternate; } @keyframes scoll { 0% { transform: translate(0px, 0px); } 100% { transform: translate(0px, -353px); } } @-webkit-keyframes scoll { 0% { transform: translate(0px, 0px); } 100% { transform: translate(0px, -353px); } } The above is the details of how to achieve seamless scrolling and anti-shake using Css3. For more information about CSS3 seamless scrolling and anti-shake, please pay attention to other related articles on 123WORDPRESS.COM! |
<<: How to import and export Cookies and Favorites in FireFox
>>: Detailed explanation of JavaScript object conversion to primitive value
Preface There are two types of nginx modules, off...
We often want to find a file in Linux, but we don...
Preface Students who learn JavaScript know that A...
Recently, I found that after using the docker loa...
Detailed example of database operation object mod...
This article uses an example to share with you a ...
Install zip decompression function under Linux Th...
background Last week the company trained on MySQL...
In the Linux system, there is a kind of file call...
Table of contents tool: Login scenario: practice:...
Related articles: Beginners learn some HTML tags ...
I. Introduction 1: SSL Certificate My domain name...
In actual Web development, inserting images, incl...
In the previous article, we played with timeouts ...
Text Shadow text-shadow: horizontal offset vertic...