動畫關鍵幀不衰減？

Question

@keyframes test { 

    0% { color: red; } /* Starts red */ 
    50% { color: green; } /* Fades to green from red */ 
100% { color: blue; } /* Instant blue? Is no fading from green possible? */ 

} 

從red到​​是否可以正常地有0％-50％的轉換，然後blue在沒有轉換之後立即出現？所以在上面的例子中，一旦50％完成，它立即變成blue（即沒有從綠色退色）直到100％完成？

Answer 1

看看這個fiddle工程確定

<div class="top"></div> 

.top { 
    width: 100px; 
    height: 100px; 
    background: red; 
    animation: test 5s; 
} 

@keyframes test { 
    0% { background:red; } 
    50% { background:green; } 
    50.01% { background:blue; } 
    100% { background:blue; } 
}