css3三维变换不'；不能顺利地进行动画制作

我发现这个CSS3 3D动画：；我试图复制它：；但正如你所看到的，我的动画跳跃时，另一个是不平滑的

我的HTML如下所示：

<div class="pole-container">
    <div class="pole">

        <div class="stripes-wrapper">
            <span class="stripe-01"></span>
            <span class="stripe-02"></span>
            <span class="stripe-03"></span>
            <span class="stripe-04"></span>
            <span class="stripe-05"></span>
            <span class="stripe-06"></span>
            <span class="stripe-07"></span>
            <span class="stripe-08"></span>
            <span class="stripe-09"></span>
            <span class="stripe-10"></span>
            <span class="stripe-11"></span>
            <span class="stripe-12"></span>
        </div>

    </div>
</div>

如果有人能指出我的动画没有以同样的方式表现的原因，我将不胜感激。

以下是您的答案：

现在，动画“跳跃”的原因有两个。一个是“动画”只有一条彩色条纹，一条蓝色条纹，而“复制品”有两条彩色条纹，红色和蓝色。关键帧只能通过欺骗眼睛，使其认为看到的是同一条条纹一直穿过酒吧而起作用。这只在颜色保持不变时才有效

虽然我的JSFIDLE可以使用两种颜色，但效果是它的条纹是相同的，但它在移动时在红色和蓝色之间交替。从本质上来说，这并不是一个坏的效果，但这就是复制品不如动画效果好的原因。代码只支持一种颜色。两种颜色都可以，但要找出条纹必须经过的距离，以及它们的数量、宽度和它们之间的距离，还需要一些反复试验

第二个原因是关键帧没有正确同步

“动画”在循环之前将其条纹移动20像素，这很好，因为条纹之间的距离、条纹数量和条纹宽度意味着这种距离成功地欺骗了眼睛，使其认为看到相同的条纹在条纹上一路移动

0%   {
    -webkit-transform: translate3D(-30px,0,0);
}
100% {
    -webkit-transform: translate3D(-10px,0,0);
}

使用“复制品”时，虽然条纹的数量相同，但条纹之间的距离不同，从而产生一种不和谐的效果，即条纹似乎“跳跃”。事实上，动画只是循环得太快了，并且这些条没有移动到动画所需的距离以蒙蔽眼睛。因此，通过尝试一个错误，我发现24px的距离是最平滑的距离：

@-webkit-keyframes WEBKIT-BP {
    0%   {
        -webkit-transform: translate3D(-30px, 0, 0);
    }

    100% {
        -webkit-transform: translate3D(-6px, 0, 0);
    }
}

---

按照罗兰所说的，试试这些：

    .bs-stripes-wrapper {
    height: 40px;
    white-space: nowrap;   
   -webkit-animation: WEBKIT-BP 1s linear infinite;
   -moz-animation: MOZ-BP 1s linear infinite;
   -ms-animation: MS-BP 1s linear infinite;
   -o-animation: O-BP 1s linear infinite;
   animation: BP 1s linear infinite;
}

并改变这些：

@-webkit-keyframes WEBKIT-BP {
    0%   {
        -webkit-transform: translate3D(-60px, 0, 0);
    }

    100% {
        -webkit-transform: translate3D(-12px, 0, 0);
    }
}

@-moz-keyframes MOZ-BP {
    0%   {
        -moz-transform: translateX(-60px);
    }
    100% {
        -moz-transform: translateX(-12px);
    }
}
@-ms-keyframes MS-BP {
    0%   {
        -ms-transform: translateX(-60px);
    }
    100% {
        -ms-transform: translateX(-12px);
    }
}
@-o-keyframes O-BP {
    0%   {
        -o-transform: translateX(-60px);
    }
    100% {
        -o-transform: translateX(-12px);
    }
}
@keyframes BP {
    0%   {
        transform: translateX(-60px);
    }
    100% {
        transform: translateX(-12px);
    }
}

因为你有两条线，你需要移动两倍的距离，并且速度加倍，因为距离更大

---

我不确定你是否真的从这种方式制作动画中受益，但这是一个有趣的实验

我想我离这里很近了…不要像几个星期前其他人那样删除这个该死的问题！那是什么呢？是不是需要更小的高度？不同的颜色呢？罗兰：它会用不同的颜色，但这需要更多的尝试和错误，请阅读我编辑的答案！：）我明白了，我只是改变了距离，它似乎起作用了，只是颜色有点奇怪：；我该怎么做才能使颜色正常？我明白了。。。。。这听起来像是一个很好的理由：）我会努力找到一种方法来做到这一点……嗯，这完全是斯塔克的解决方案，只是指出了它。8)

    .bs-stripes-wrapper {
    height: 40px;
    white-space: nowrap;   
   -webkit-animation: WEBKIT-BP 1s linear infinite;
   -moz-animation: MOZ-BP 1s linear infinite;
   -ms-animation: MS-BP 1s linear infinite;
   -o-animation: O-BP 1s linear infinite;
   animation: BP 1s linear infinite;
}

@-webkit-keyframes WEBKIT-BP {
    0%   {
        -webkit-transform: translate3D(-60px, 0, 0);
    }

    100% {
        -webkit-transform: translate3D(-12px, 0, 0);
    }
}

@-moz-keyframes MOZ-BP {
    0%   {
        -moz-transform: translateX(-60px);
    }
    100% {
        -moz-transform: translateX(-12px);
    }
}
@-ms-keyframes MS-BP {
    0%   {
        -ms-transform: translateX(-60px);
    }
    100% {
        -ms-transform: translateX(-12px);
    }
}
@-o-keyframes O-BP {
    0%   {
        -o-transform: translateX(-60px);
    }
    100% {
        -o-transform: translateX(-12px);
    }
}
@keyframes BP {
    0%   {
        transform: translateX(-60px);
    }
    100% {
        transform: translateX(-12px);
    }
}