我找到了这个关于CSS3 3D动画的示例:Animation,我正在尝试复制它:Replica,但是你可以看到我的动画跳来跳去,没有那种顺滑的感觉。
我的HTML代码如下:
我的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);
}
有人能指出我的动画为什么不能像以前那样工作吗?我会非常感激。