html - 轮播中的图像闪烁

Question

我创建了以下仅在移动设备上显示的图片轮播:

<div class="container">
    <div class="photobanner">
        <img class="second"  src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/transimage.png">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/3-1.jpg" alt="tempo">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/6-3.jpg" alt="snickers">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/23.jpg" alt="wizz">
                              <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/35-1.jpg" alt="הוואי"> 

                 <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/NesherPointer.jpg" alt="נשר">
         <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/2.jpg" alt="Xerox">
         <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/9.jpg" alt="Neutrogena">
         <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/8.jpg" alt="Orbit">
         <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/11.jpg" alt="M & M">
         <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/12.jpg" alt="Mercedes-Benz">
         <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/15-1.jpg" alt="Hyundai">
         <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/14.jpg" alt="Johnnson & Johnson">
         <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/16-1.jpg" alt="Decathlon">

         <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/22-1.jpg" alt="תעבורה">

         <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/UPSPEPSI.jpg" alt="Pepsi & UPS">
         <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/27-1.jpg" alt="Mars">
         <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/fivebabysitter.jpg" alt="5 & babysitter">
         <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/mastercardnetflix.jpg" alt="Mastercard & netflix">
                  <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/19-1.jpg" alt="Bang & Olufsen">

         <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/25-1.jpg" alt="Newpan">

         <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/28-1.jpg" alt="Magimix">
         <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/29-1.jpg" alt="LR Group">
                  <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/30-1.jpg" alt="Colombil Corp">
                  <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/31-1.jpg" alt="Kitchen Aid">
                                    <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/32-1.jpg" alt="הוואי">       <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/33-1.jpg" alt="Haier">
                                                                                      <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/34-1.jpg" alt="DeLonghi">


          </div>
</div>

这是 CSS:

/* Photo Banner */
.container {
    width:100%;
    overflow: hidden;
    margin: 5px auto;
    background: white;
}

.photobanner {
    height: 120px;
    width: 3000px;
}

.photobanner img {
    height: 120px;
    width: 120px;
}

.photobanner img  {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}


/*keyframe animations*/
.second {
    -webkit-animation: bannermoves 25s linear infinite;
       -moz-animation: bannermoves 25s linear infinite;
        -ms-animation: bannermoves 25s linear infinite;
         -o-animation: bannermoves 25s linear infinite;
            animation: bannermoves 25s linear infinite;;
}

@keyframes "bannermoves" {
 0% {margin-left: -3000px;}
 100% {margin-left: 200px;}
}

@-moz-keyframes bannermoves {
 0% {margin-left: -3000px;}
 120% {margin-left: 200px;}
}

@-webkit-keyframes "bannermoves" {
 0% {margin-left: -3000px;}
 100% {margin-left: -100px;}
}

@-ms-keyframes "bannermoves" {
 0% {margin-left: -3000px;}
 100% {margin-left: 200px;}

@-o-keyframes "bannermoves" {
 0% {margin-left: -3000px;}
 100% {margin-left: 200px;}
}

问题是，当我在移动设备上查看它时，图像会有点闪烁/抖动，我不明白为什么。您可以在 www.wolfppr.donut.co.il 上亲自查看(在主页上向下滚动一点，您会看到 Logo 轮播)。 wolfppr.donut.co.il还有另一个用于桌面的轮播，但它与移动轮播无关。我不知道为什么会这样。

谢谢!

Answer 1

在 CSS 中为动画/过渡使用边距或位置几乎总是会导致“抖动”或“闪烁”的 Action 。元素仅在浏览器确定对它们有利时才使用 GPU 加速。由于边距不应用于定位元素，因此这些元素会遭受帧速率下降的影响，因此会出现卡顿现象。

看看这个 CodePen，它使用 Margin、Position 和 Transform 简单地比较了一个简短的左/右动画:https://codepen.io/xhynk/pen/MBmWPm

代替

@keyframes a {
    from { margin-left: 0; }
    to   { margin-left: calc( 100vw - 30px ); }
}

它利用

@keyframes c {
    from { transform: translateX(0); }
    to   { transform: translateX( calc( 100vw - 30px ) ); }
}

尤其是在移动设备上，您会注意到变换框明显更加平滑。