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

How to use the realip module in Nginx basic learning

Preface There are two types of nginx modules, off...

Specific use of Linux which command

We often want to find a file in Linux, but we don...

Summary of relevant knowledge points of ajax in jQuery

Preface Students who learn JavaScript know that A...

Solution to the problem that the image name is none after Docker load

Recently, I found that after using the docker loa...

Detailed example of database operation object model in Spring jdbc

Detailed example of database operation object mod...

Native JS to achieve cool paging effect

This article uses an example to share with you a ...

Install zip and unzip command functions under Linux and CentOS (server)

Install zip decompression function under Linux Th...

Analysis of the principles and usage of Linux hard links and soft links

In the Linux system, there is a kind of file call...

The practical process of login status management in the vuex project

Table of contents tool: Login scenario: practice:...

Beginners learn some HTML tags (3)

Related articles: Beginners learn some HTML tags ...

How to configure SSL for koa2 service

I. Introduction 1: SSL Certificate My domain name...

Play with the connect function with timeout in Linux

In the previous article, we played with timeouts ...

New settings for text and fonts in CSS3

Text Shadow text-shadow: horizontal offset vertic...