css - css3 3D 変換がスムーズにアニメーション化されない

Question

このCSS3 3Dアニメーションを見つけました：アニメーション; そして私はそれを複製しようとしています:レプリカ; しかし、あなたが見ることができるように、私のアニメーションは他の部分で滑らかにならずにジャンプします.

私の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);
}

私のアニメーションが同じように動作しない理由を誰か指摘できますか?