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上自行查看（在首页上向下滚动，您会看到徽标轮播）。wolfppr.donut.co.il还有一个台式机轮播，但是与桌面无关。旋转木马。我不知道为什么会这样。

谢谢！

Answer 1

在CSS中为动画/过渡使用边距或位置几乎总是会导致“抖动”或“闪烁”运动。元素仅在浏览器确定对其有利时才使用GPU加速。由于不应该使用Margin来定位元素，因此这些元素会遭受帧速下降的影响，从而造成口吃。

看看此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 ) ); }
}

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

轮播闪烁中的图像

1 个答案: