Webkit關鍵幀不工作

Question

我想使用關鍵幀來製作客戶端的站點徽標（只是使用@ font-face的文本）淡入淡出不同的顏色。不知何故，我無法得到這個工作！

@-webkit-keyframes colorPulse { 0% {color: rgba(236, 250, 42, 0.6);} 
50% {color: rgba(253, 149, 223, 0.6);} 100% {color: rgba(1, 218, 213, 0.6);} } 

#site-logo { 
font-family: KaBlamo; 
font-size: 90px; 
text-align: center; 
width: 100%; 
position: absolute; 
top: 30px; 
margin: 20px 0 .4em; 
-webkit-animation: colorPulse 15s infinite alternate; 
} 

Answer 1

對我來說，你的代碼工作相當不錯：

https://jsfiddle.net/3frdpw4h/

哪些瀏覽器您使用？也許你必須提供前置動畫屬性+關鍵幀規則？

@-webkit-keyframes colorPulse { 
    0% {color: rgba(236, 250, 42, 0.6);} 
    50% {color: rgba(253, 149, 223, 0.6);} 
    100% {color: rgba(1, 218, 213, 0.6);} 
} 
@keyframes colorPulse { 
    0% {color: rgba(236, 250, 42, 0.6);} 
    50% {color: rgba(253, 149, 223, 0.6);} 
    100% {color: rgba(1, 218, 213, 0.6);} 
} 

#site-logo { 
    font-family: KaBlamo; 
    font-size: 90px; 
    text-align: center; 
    width: 100%; 
    position: absolute; 
    top: 30px; 
    margin: 20px 0 .4em; 
    -webkit-animation: colorPulse 15s infinite alternate; 
    animation: colorPulse 15s infinite alternate; 
}