Css3实现无缝滚动防抖

零五零八

问题
     图片加文字的无缝滚动，在手机端的效果总体还行，但是图片在手机某些浏览器会抖得腻害！

错误写法
             不能用left，margin-left,像这种写法:

1. .donghua.active{
   
2.   animation: scoll ease-in-out 1s infinite alternate;
   
3.   -webkit-animation: scoll ease-in-out 1s infinite alternate;
   
4. }
   
5. @keyframes scoll  {
   
6.   from {
   
7.     left: 0;
   
8.   }
   
9.   to {
   
10.     left: -353px;
    
11.   }
    
12. }
    
13. -webkit-@keyframes scoll  {
    
14.   from {
    
15.     left: 0;
    
16.   }
    
17.   to {
    
18.     left: -353px;
    
19.   }
    
20. }
    

复制代码

解决方法
         里面的某个元素在手机端会抖动的腻害,改用二维的translate像这样:

1. .donghua.active{
   
2.   animation: scoll ease-in-out 1s infinite alternate;
   
3.   -webkit-animation: scoll ease-in-out 1s infinite alternate;
   
4. }
   
5. @keyframes scoll {
   
6.   0% {
   
7.     transform: translate(0px, 0px);
   
8.   }
   
9. 
   
10.   100% {
    
11.     transform: translate(0px, -353px);
    
12.   }
    
13. }
    
14. @-webkit-keyframes scoll {
    
15.   0% {
    
16.     transform: translate(0px, 0px);
    
17.   }
    
18. 
    
19.   100% {
    
20.     transform: translate(0px, -353px);
    
21.   }
    
22. }
    

复制代码