没有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;
- }
