阿里云優(yōu)惠券 先領(lǐng)券再下單

這篇文章主要介紹了Css3實現(xiàn)無縫滾動防抖的方法，幫助大家解決圖片抖動，感興趣的朋友可以了解下

問題

圖片加文字的無縫滾動，在手機端的效果總體還行，但是圖片在手機某些瀏覽器會抖得膩害！

錯誤寫法

不能用left，margin-left,像這種寫法:

.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;
}
}

解決方法

里面的某個元素在手機端會抖動的膩害,改用二維的translate像這樣:

.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);
}
}

以上就是Css3實現(xiàn)無縫滾動防抖的詳細(xì)內(nèi)容，更多關(guān)于CSS3 無縫滾動 防抖的資料請關(guān)注腳本之家其它相關(guān)文章！

文章來源：腳本之家，原文鏈接：https://www.jb51.net/css/745016.html

申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！