css3 3D变换不能平滑地制作动画

时间：2013-05-19 13:19:01

标签： css3 transform css-animations

我发现了这个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);
}

任何人都可以指出为什么我的动画不是以同样的方式行事，我会很感激吗？

2 个答案:

答案 0 :(得分：4)

这是你的答案：

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不能像动画一样好用。该代码仅支持一种颜色。两种颜色很好，但是需要一些试验和错误来找出条纹必须经过的距离，以及它们的数量，宽度和它们之间的距离。

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

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

答案 1 :(得分：1)

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

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

由于你有两条线，你需要向前移动两次，并且由于距离更远，所以它的速度加倍。

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

相关问题
最新问题