目前，我有这个代码：
@-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上结束它，所以它从0%开始并以100%结束，所以只需在0设置不透明度到50%，休息就会照顾好自己。
.blink_me {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}<div class="blink_me">BLINK ME</div>在这里，设置动画持续时间应该是1 second，而不是将timing设置为linear，这意味着它将始终保持不变，并且最后使用infinite意味着它会继续下去。
注意：如果这对您不起作用，请使用
-webkit和-moz等animation，@keyframes等浏览器前缀。你可以参考我的详细代码here
如评论所述，这不适用于旧版本的Internet Explorer，因此，您需要使用jQuery或JavaScript ....
(function blink() {
$('.blink_me').fadeOut(500).fadeIn(500, blink);
})();
感谢Alnitak建议使用better approach。
Demo（使用jQuery的Blinker）
使用alternate的animation-direction值（并且您不需要以这种方式添加任何keframe）。
alternate动画应该在每个循环中反转方向。反向播放时，向后执行动画步骤。此外，定时功能也相反;例如，当反向播放时，轻松动画会被轻松动画取代。确定它是偶数还是奇数迭代的计数从1开始。
CSS：
.waitingForConnection {
animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}
@keyframes blinker { to { opacity: 0; } }
我删除了from关键帧。如果它丢失了，它将从您为元素设置的动画属性（在本例中为opacity）中生成的值生成，或者如果您尚未设置它（并且在本例中没有），则从默认值生成价值（1为opacity）。
请不要只使用WebKit版本。在它之后添加未加前缀的那个。如果您只想编写更少的代码，请使用the shorthand。
获得纯粹的“100％开启，100％关闭”闪烁的最佳方式，就像旧的<blink>一样：
.blink {
animation: blinker 1s step-start infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}<div class="blink">BLINK</div>或者，如果您不希望在显示和隐藏之间逐渐过渡（例如闪烁的文本光标），您可以使用以下内容：
/* 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;
}
每个1s .cursor将从visible到hidden。
如果不支持CSS动画（例如在某些版本的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调用使JS动画变慢（例如JQuery的$ .animate（））。
它还有第二个优点，如果你以后添加.cursor元素，它们仍将与其他.cursors完全同时生成动画，因为状态是共享的，据我所知，这对CSS来说是不可能的。
我不知道为什么但只动画visibility属性不适用于任何浏览器。
您可以做的是为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; }
}
迟到但想添加一个带有更多关键帧的新版本...这里是example on CodePen，因为内置代码片段存在问题：
.block{
display:inline-block;
padding:30px 50px;
background:#000;
}
.flash-me {
color:#fff;
font-size:40px;
-webkit-animation: flash linear 1.7s infinite;
animation: flash linear 1.7s infinite;
}
@-webkit-keyframes flash {
0% { opacity: 0; }
80% { opacity: 1; color:#fff; }
83% { opacity: 0; color:#fff; }
86% { opacity: 1; color:#fff;}
89% { opacity: 0}
92% { opacity: 1; color:#fff;}
95% { opacity: 0; color:#fff;}
100% { opacity: 1; color:#fff;}
}
@keyframes flash {
0% { opacity: 0; }
80% { opacity: 1; color:#fff; }
83% { opacity: 0; color:#fff; }
86% { opacity: 1; color:#fff;}
89% { opacity: 0}
92% { opacity: 1; color:#fff;}
95% { opacity: 0; color:#fff;}
100% { opacity: 1; color:#fff;}
}<span class="block">
<span class="flash-me">Flash Me Hard</span>
</span><style>
.class1{
height:100px;
line-height:100px;
color:white;
font-family:Bauhaus 93;
padding:25px;
background-color:#2a9fd4;
border:outset blue;
border-radius:25px;
box-shadow:10px 10px green;
font-size:45px;
}
.class2{
height:100px;
line-height:100px;
color:white;
font-family:Bauhaus 93;
padding:25px;
background-color:green;
border:outset blue;
border-radius:25px;
box-shadow:10px 10px green;
font-size:65px;
}
</style>
<script src="jquery-3.js"></script>
<script>
$(document).ready(function () {
$('#div1').addClass('class1');
var flag = true;
function blink() {
if(flag)
{
$("#div1").addClass('class2');
flag = false;
}
else
{
if ($('#div1').hasClass('class2'))
$('#div1').removeClass('class2').addClass('class1');
flag = true;
}
}
window.setInterval(blink, 1000);
});
</script>