webkit關鍵幀在最小化時中斷

面對一個奇怪的問題;試圖創造一個微調。當我的CSS縮小了webkit關鍵幀的格式更改;這打破了代碼。webkit關鍵幀在最小化時中斷

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

來源

2017-08-07 JavaQuest

縮小的是後0

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

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

}

來源

2017-08-07 17:31:13

感謝您指出:-)。我瘋了。 – JavaQuest

非常歡迎您！總是需要一雙新鮮的眼睛來挑選最小的問題。 –

正如列維指出％符號在縮小的版本被刪除缺少％;大概它認爲0沒有價值。這個問題的解決方法是將0％更改爲1％，這不是理想的解決方案，但它可以讓事情順利進行。

來源

2017-08-07 17:46:33 JavaQuest

webkit關鍵幀在最小化時中斷

回答

相關問題