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
1. Introduction to TypeScript The previous articl...
1. Make sure the system has the required libaio s...
The Linux seq command can generate lists of numbe...
Nginx can use the limit_req_zone directive of the...
Generally speaking, once a column in a data table...
Using fonts on the Web is both a fundamental skill...
This article shares the specific code of vue echa...
This article uses examples to explain the princip...
When any project develops to a certain complexity...
1. Check the firewall status Check the firewall s...
Step 1: Create a Django project Open the terminal...
Sometimes, we want the text boxes in the form to b...
Download url-loader yarn add -D url-loader module...
Error message: ERROR 2002: Can't connect to l...
Table of contents 1. Background: 2. Design ideas:...