css3 3D 变换动画不流畅答案

【问题标题】：css3 3D transform doesn't animate smoothlycss3 3D 变换动画不流畅
【发布时间】：2013-05-19 13:19:01
【问题描述】：

我找到了这个 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);
}

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

【问题讨论】：

我想我已经接近了……不要像几周前其他人那样删除这个该死的问题！

标签： css transform css-animations

【解决方案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 可以使用两种颜色，但效果是相同的条纹穿过条形，但在移动时会在红色和蓝色之间交替。本质上不是一个坏效果，但这就是为什么 Replica 不如 Animation 工作的原因。该代码仅支持一种颜色。两种颜色都可以，但需要反复试验才能找出条纹必须经过的距离，以及它们的数量、宽度和它们之间的距离。

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

“动画”在循环之前将其条纹移动 20 个像素，这很好，因为条纹之间的距离、条纹的数量和条纹的宽度意味着这个距离成功地诱使眼睛认为它看到了相同的条纹一直穿过酒吧。

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

使用“Replica”，虽然条纹的数量相同，但它们之间的距离不同，从而产生了条纹似乎“跳跃”的不和谐效果。实际上，动画只是循环得太快了，并且条形图没有移动到动画所需的距离以欺骗眼睛。正因为如此，经过一番试错，我发现24px的距离是最平滑的距离：

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

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

【讨论】：

那是什么？是需要更小的高度吗？
那么不同的颜色呢？它不适合那个权利吗？
@Roland 它适用于不同的颜色，但需要更多的试验和错误，阅读我编辑的答案！ :)
我明白了，我只是改变了那个距离，它似乎起作用了，只是颜色有点奇怪：jsfiddle.net/TWWwj；我该怎么做才能使颜色表现出来？
我明白了......这听起来是一个很好的推理:) 我会尝试找到一种方法来做到这一点......

【解决方案2】：

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

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