没有Javascript,我想制作一个简单的循环CSS动画类,无限地淡入淡出文本。我不太了解CSS动画,所以我还没有想到,但是我已经得到了多少:
@keyframes flickerAnimation { /* flame pulses */ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } .animate-flicker { opacity:1; animation: flickerAnimation 1s infinite; }
解决方法
正如King King所说,您必须添加浏览器特定的前缀。这应该涵盖大多数浏览器:
@keyframes flickerAnimation { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-o-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } .animate-flicker { -webkit-animation: flickerAnimation 1s infinite; -moz-animation: flickerAnimation 1s infinite; -o-animation: flickerAnimation 1s infinite; animation: flickerAnimation 1s infinite; }