Css3 realizes seamless scrolling and anti-shake

Css3 realizes seamless scrolling and anti-shake

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

Recommend

Sample code for implementing neon button animation effects with CSS3.0

Today I will share with you a neon button animati...

uniapp project optimization methods and suggestions

Table of contents 1. Encapsulate complex page dat...

mysql code to implement sequence function

MySQL implements sequence function 1. Create a se...

Three ways to delete a table in MySQL (summary)

drop table Drop directly deletes table informatio...

Navicat connection MySQL error description analysis

Table of contents environment Virtual Machine Ver...

How to clear mysql registry

Specific method: 1. Press [ win+r ] to open the r...

Tutorial on installing mysql5.7.36 database in Linux environment

Download address: https://dev.mysql.com/downloads...

Various types of MySQL indexes

What is an index? An index is a data structure th...

How to check if the firewall is turned off in Linux

1. Service method Check the firewall status: [roo...

HTML table tag tutorial (34): row span attribute ROWSPAN

In a complex table structure, some cells span mul...

Free tool to verify that HTML, CSS and RSS feeds are correct

One trick for dealing with this type of error is t...

React implements the addition, deletion, modification and query of todolist

Table of contents Take todolist as an example The...

A brief introduction to MySQL storage engine

1. MySql Architecture Before introducing the stor...