logo标签列表

CSS3 3D转换动画不流畅

csstransformcss-animations
4
我找到了这个关于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);
}

有人能指出我的动画为什么不能像以前那样工作吗？我会非常感激。

1
我觉得我离成功不远了...别像几周前那样把这该死的问题删除了！ - Starkers
2个回答
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);
    }
}

现在，动画“跳跃”的原因有两个。一是“Animation”只有一个蓝色条纹，而“Replica”有两个彩色条纹，红色和蓝色。关键帧只能通过欺骗眼睛让其认为看到的是同一条纹线一直穿过条形图。这仅在保持相同颜色时有效！
尽管我的jsfiddle可以使用两种颜色，但效果是同一条纹线沿着条形图移动，但在移动过程中会交替显示红色和蓝色。本质上不是一个坏效果，但这就是为什么“Replica”的效果不如“Animation”好的原因。该代码仅支持一种颜色。两种颜色也可以，但需要进行一些试验和误差来找出条纹必须移动的距离、宽度以及它们之间的距离。
第二个原因是您的关键帧没有正确同步。
“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
@Roland 它可以使用不同的颜色，但这需要更多的试错，请阅读我的编辑答案！ :) - Starkers
我明白了，我刚刚改变了那个距离，它似乎正在工作，只是颜色有点奇怪：http://jsfiddle.net/TWWwj/; 我该怎么做才能让颜色表现正常？ - Roland
尽管我的jsfiddle可以使用两种颜色，但效果是相同的条纹穿过栏，但在行进过程中在红色和蓝色之间交替。本质上不是一个坏效果，但这就是为什么复制品不像动画那样有效的原因。该代码仅支持一种颜色。两种颜色没问题，但需要一些试错来找出条纹必须行进的距离，以及它们的数量、宽度和距离。 - Starkers
1
我明白了......听起来很有道理 :) 我会尝试找到一种方法来做到这一点.... - Roland
显示剩余3条评论
1
根据Roland所说的，尝试以下内容：

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

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

我不确定这样做动画是否真正有益，但这是一个有趣的实验。

好的，这完全是Starker的解决方案，只是指出来而已。8) - nosarious
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接