如何使用CSS 3闪烁/闪烁的文本？
目前，我有这样的代码：
@-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } 它眨了眨眼，但只是在“一个方向”闪烁。 我的意思是，它只是淡出，然后它以opacity: 1.0出现opacity: 1.0 ，然后再次淡出，再次出现，等等…我希望淡出，然后再从这个淡出“提高”回来到opacity: 1.0 。 那可能吗？
首先设置opacity: 1; 然后你在0结束它，所以它从0%开始，并在100%结束，所以相反只是在50%设置不透明度为0 ，rest会照顾自己。
演示
.blink_me { animation: blinker 1s linear infinite; } @keyframes blinker { 50% { opacity: 0; } }
在这里，设置animation的持续时间应该是1 second ，而不是将timing设置为linear ，这意味着它将始终保持不变，并且最后使用infinite ，这意味着它将持续下去。
注意：如果这不起作用，请根据
animation和@keyframes需要使用浏览器前缀，如-webkit，-moz等。 你可以在这里参考我的详细代码
正如所评论的，这不适用于旧版本的Internet Explorer，因此，您需要使用jQuery或JavaScript ….
(function blink() { $('.blink_me').fadeOut(500).fadeIn(500, blink); })();
感谢Alnitakbuild议更好的方法 。
演示 （使用jQuery的Blinker）
使用animation-direction的alternate值（并且不需要以这种方式添加任何keframes）。
alternateanimation应该在每个周期反转方向。 当反向播放时，animation步骤向后执行。 另外，定时function也相反。 例如，当反向播放时，缓和animation被replace为缓和animation。 确定是偶数还是奇数迭代的计数从1开始。
CSS ：
.waitingForConnection { animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate; } @keyframes blinker { to { opacity: 0; } }
我已经删除了关键帧。 如果缺失，则从您为元素设置的animation属性（ opacity ）生成的值生成，或者如果尚未设置（在此情况下您没有设置），则从默认值值（ opacity为1 ）。
请不要只使用WebKit版本。 之后添加前缀。 如果你只是想写更less的代码，使用简写 。
或者，如果您不希望显示和隐藏之间的逐渐过渡（例如闪烁的文本光标），则可以使用如下所示的内容：
/* Also use prefixes with @keyframes and animation to support current browsers */ @keyframes blinker { from { visibility: visible } to { visibility: hidden } /* Alternatively you can do this: 0% { visibility: visible; } 50% { visibility: hidden; } 100% { visibility: visible; } if you don't want to use `alternate` */ } .cursor { animation: blinker steps(1) 500ms infinite alternate; }
每一个.cursor将从可visible hidden 。
如果不支持CSSanimation（例如在某些版本的Safari中），则可以回退到这个简单的JS间隔：
(function(){ var show = 'visible'; // state var toggled by interval var time = 500; // milliseconds between each interval setInterval(function() { // Toggle our visible state on each interval show = (show === 'hidden') ? 'visible' : 'hidden'; // Get the cursor elements var cursors = document.getElementsByClassName('cursor'); // We could do this outside the interval callback, // but then it wouldn't be kept in sync with the DOM // Loop through the cursor elements and update them to the current state for (var i = 0; i < cursors.length; i++) { cursors[i].style.visibility = show; } }, time); })()
这个简单的JavaScript实际上是非常快的，在许多情况下甚至可能比CSS更好的默认。 值得注意的是，大量的DOM调用让JSanimation变慢（例如JQuery的$ .animate（））。
它还具有第二个优点，即如果以后添加.cursor元素，它们仍然会与其他.cursor完全同时animation，因为状态是共享的，就我所知，这对于CSS是不可能的。
我不知道为什么，但animation只有visibility属性不适用于任何浏览器。
你可以做的是animation的opacity属性，使浏览器没有足够的框架淡入或淡出的文本。
例：
span { opacity: 0; animation: blinking 1s linear infinite; } @keyframes blinking { from, 49.9% { opacity: 0; } 50%, to { opacity: 1; } }
<span>I'm blinking text</span>
@-webkit-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } }
改变持续时间和不透明度以适应。
.blink_text { -webkit-animation-name: blinker; -webkit-animation-duration: 3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: blinker; -moz-animation-duration: 3s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; animation-name: blinker; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; color: red; } @-moz-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.3; } 100% { opacity: 1.0; } } @-webkit-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.3; } 100% { opacity: 1.0; } } @keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.3; } 100% { opacity: 1.0; } }
