我想使用关键帧使客户的站点 Logo (只是使用@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;
}
最佳答案
对我来说你的代码工作得很好:
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;
}
关于css - Webkit 关键帧不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26289441/