最小化するとウェブキットのキーフレームが壊れます

Question

奇妙な問題に直面しています。スピナーを作成しようとしています。 私のCSSがウェブキットのキーフレームのフォーマット変更を縮小すると、コードを壊す

CSSファイル：

.newSpinner { 
    margin-top: 21%; 
    width: 100%; 
    text-align: center; 
    position: absolute; 
} 

.newSpinner > div { 
    width: 18px; 
    height: 18px; 
    background-color: #333; 
    border-radius: 100%; 
    display: inline-block; 
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; 
    animation: sk-bouncedelay 1.4s infinite ease-in-out both; 
} 

.newSpinner .bounce1 { 
    -webkit-animation-delay: -0.50s; 
    animation-delay: -0.50s; 
} 

.newSpinner .bounce2 { 
    -webkit-animation-delay: -0.42s; 
    animation-delay: -0.42s; 
} 

.newSpinner .bounce3 { 
    -webkit-animation-delay: -0.30s; 
    animation-delay: -0.30s; 
} 

.newSpinner .bounce4 { 
    -webkit-animation-delay: -0.20s; 
    animation-delay: -0.20s; 
} 

.newSpinner .bounce5 { 
    -webkit-animation-delay: -0.10s; 
    animation-delay: -0.10s; 
} 

@-webkit-keyframes sk-bouncedelay { 
    0%, 80%, 100% { -webkit-transform: scale(0) } 
    40% { -webkit-transform: scale(1.0) } 
} 

はHTML：

<div class="newSpinner"> 
     <div class="bounce1"></div>   
     <div class="bounce2"></div>   
     <div class="bounce3"></div>   
     <div class="bounce4"></div>   
     <div class="bounce5"></div> 
    </div> 

フィドル：https://jsfiddle.net/zo70h82c/

問題はここに起こる：コードの下に、私が言及したコードの一部を縮小さバージョンです

@-webkit-keyframes sk-bouncedelay { 
    0,80%,100% { 
      -webkit-transform: scale(0) 
    } 

    40% { 
      -webkit-transform: scale(1.0) 
    } 
    } 

上記

オリジナル：

@-webkit-keyframes sk-bouncedelay { 
0%, 80%, 100% { -webkit-transform: scale(0) } 
40% { -webkit-transform: scale(1.0) } 
} 

Answer 1

縮小さであるレヴィが縮小さのバージョンでは削除されます％記号を指摘したように0

@-webkit-keyframes sk-bouncedelay { 
0%,80%,100% { 
     -webkit-transform: scale(0) 
} 

40% { 
     -webkit-transform: scale(1.0) 
} 

}

Answer 2

後％が不足し、おそらく0は価値がないと思うでしょう。 この修正は、0％から1％に変更することでしたが、これは理想的な解決策ではありませんが、状況が変わります。