Css3如何实现无缝滚动防抖

这篇“Css3如何实现无缝滚动防抖”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“Css3如何实现无缝滚动防抖”，小编整理了以下知识点，请大家跟着小编的步伐一步一步的慢慢理解，接下来就让我们进入主题吧。

问题

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

错误写法

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

.donghua.active{
animation:scollease-in-out1sinfinitealternate;
-webkit-animation:scollease-in-out1sinfinitealternate;
}
@keyframesscoll{
from{
left:0;
}
to{
left:-353px;
}
}
-webkit-@keyframesscoll{
from{
left:0;
}
to{
left:-353px;
}
}

解决方法

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

.donghua.active{
animation:scollease-in-out1sinfinitealternate;
-webkit-animation:scollease-in-out1sinfinitealternate;
}
@keyframesscoll{
0%{
transform:translate(0px,0px);
}

100%{
transform:translate(0px,-353px);
}
}
@-webkit-keyframesscoll{
0%{
transform:translate(0px,0px);
}

100%{
transform:translate(0px,-353px);
}
}

以上是“Css3如何实现无缝滚动防抖”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道！