Webkit 关键帧不起作用

【问题标题】：Webkit Keyframes not workingWebkit 关键帧不起作用
【发布时间】：2014-12-05 00:49:17
【问题描述】：

我想使用关键帧使客户的网站徽标（只是使用@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;
}

【问题讨论】：

标签： css animation webkit

【解决方案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;
}

【讨论】：