css3 3D 变换动画不流畅

Question

我找到了这个 CSS3 3D 动画:Animation ;我正在尝试复制它:Replica ;但正如您所看到的，我的动画跳跃时并不流畅。

我的 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>

还有 CSS:

.preloader-container {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: #FFFFFF;
    z-index: 5;

    opacity: 1;

    -webkit-transition: all 500ms ease-out;
       -moz-transition: all 500ms ease-out;
         -o-transition: all 500ms ease-out;
            transition: all 500ms ease-out;
}

.preloader-container.hidden {
    display: block !important;
    visibility: visible;
    opacity: 0;
    z-index: 0;
    pointer-events: none;

}

.pole-container {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -20px;
    white-space: nowrap;
    overflow: hidden;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotateX902deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.pole-container::after {
    position: absolute;
    display: block;
    content: "";
}


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

.stripes-wrapper span {
    margin: 0;
    display: inline-block;
    margin-left: 10px;
    width: 10px;
    height: 40px;
    background: #9FCBDA;
    -webkit-transform: skew(32deg);
    -moz-transform: skewX(32deg);
    -ms-transform: skew(32deg);
    -o-transform: skew(32deg);
    transform: skew(32deg);
}

谁能指出我的动画不以相同方式运行的原因，我将不胜感激？

Answer 1

这是你的答案:

http://jsfiddle.net/gPsdk/40/

.preloader-container {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: #FFFFFF;
    z-index: 5;

    opacity: 1;

    -webkit-transition: all 500ms ease-out;
       -moz-transition: all 500ms ease-out;
         -o-transition: all 500ms ease-out;
            transition: all 500ms ease-out;
}

.preloader-container.hidden {
    display: block !important;
    visibility: visible;
    opacity: 0;
    z-index: 0;
    pointer-events: none;

}

.pole-container {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -20px;
    white-space: nowrap;
    overflow: hidden;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotateX902deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.pole-container::after {
    position: absolute;
    display: block;
    content: "";
}


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

.stripes-wrapper span {
    margin: 0;
    display: inline-block;
    margin-left: 10px;
    width: 10px;
    height: 40px;
    background: #9FCBDA;
    -webkit-transform: skew(32deg);
    -moz-transform: skewX(32deg);
    -ms-transform: skew(32deg);
    -o-transform: skew(32deg);
    transform: skew(32deg);
}

span.stripe-01 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-02 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-03 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-04 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-05 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-06 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-07 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-08 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-09 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-10 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-11 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-12 {
    background-color: rgba(217, 007, 045, 1);
}


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

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

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

现在，动画“跳跃”的原因有两个。一个是“动画”只有一个颜色条纹，一个蓝色条纹，而“复制品”有两个颜色条纹，红色和蓝色。关键帧只能通过欺骗眼睛认为它看到了相同的条纹一直穿过条形图来工作。这仅在颜色保持相同时有效!

虽然我的 jsfiddle 可以使用两种颜色，但效果是相同的条纹穿过 strip ，但它在穿过时在红色和蓝色之间交替。本质上不是坏效果，但这就是为什么 Replica 效果不如 Animation 的原因。该代码仅支持一种颜色。两种颜色都可以，但需要反复试验才能确定条纹必须行进的距离，以及条纹的数量、宽度和条纹之间的距离。

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

“动画”在循环之前将其条纹移动了 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);
    }
}