目前，我有这样的代码:
@-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;
}
它会眨，但只会“朝一个方向”眨。我的意思是，它只是淡出，然后它以不透明度:1.0再次出现，然后再次淡出，再次出现，如此循环……
我想让它淡出，然后从这个淡出再次“提升”到不透明度:1.0。这可能吗?
当前回答
这是每个人的好榜样。试一试
.blinking_live {
height: 15px;
width: 15px;
border-radius: 15px;
background: #58C03D;
animation: blink-live 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
@keyframes blink-live{
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
<div class="blinking_live"></div>
其他回答
改变持续时间和不透明度以适应。
.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; }
}
使用动画方向的替代值(你不需要这样添加任何keframes)。
备用 动画应该在每个循环中反转方向。当反向播放时，动画步骤将反向执行。此外，定时函数也反转;例如，在反向播放时，缓进动画将被缓出动画取代。用于确定它是偶数还是奇数迭代的计数从1开始。
CSS:
.waitingForConnection {
animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}
@keyframes blinker { to { opacity: 0; } }
我已经删除了关键帧。如果它缺失，它将从元素上为动画属性(在本例中为不透明度)设置的值生成，或者如果您没有设置它(在本例中也没有)，则从默认值(不透明度为1)生成。
请不要只使用WebKit版本。在它后面也加一个没有前缀的。如果你只是想写更少的代码，使用速记。
.waitingForConnection { animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate; } @keyframes blinker { to { opacity: 0; } } .waitingForConnection2 { animation: blinker2 0.6s cubic-bezier(1, 0, 0, 1) infinite alternate; } @keyframes blinker2 { to { opacity: 0; } } .waitingForConnection3 { animation: blinker3 1s ease-in-out infinite alternate; } @keyframes blinker3 { to { opacity: 0; } } <div class="waitingForConnection">X</div> <div class="waitingForConnection2">Y</div> <div class="waitingForConnection3">Z</div>
我不知道为什么，但动画只有可见性属性是不工作在任何浏览器。
你能做的就是使不透明属性动画化，这样浏览器就没有足够的帧来淡入或淡出文本。
例子:
跨度{ 透明度:0; 动画:眨眼1s线性无限; ｝ @关键帧闪烁{ 从, 49.9% { 透明度:0; ｝ 50%, , { 透明度:1; ｝ ｝ 我正在闪烁文本</span>
你首先设置不透明度:1;然后在0处结束，所以它从0%开始，到100%结束，所以把不透明度设置为0，也就是50%剩下的会自动完成。
Demo
.blink_me { 动画:眨眼1s线性无限; ｝ @keyframes blinker { 50% { 透明度:0; ｝ ｝ <div class="blink_me">BLINK ME</div>
在这里，我将动画持续时间设置为1秒，然后将计时设置为线性。这意味着它始终是不变的。最后，我用的是无限。这意味着它会一直持续下去。
注意:如果这对您不起作用，请使用浏览器前缀，如 -webkit， -moz等根据需要进行动画和 @keyframes。您可以在这里参考我的详细代码
如上所述，这在旧版本的ie浏览器上行不通，为此你需要使用jQuery或JavaScript…
(function blink() {
$('.blink_me').fadeOut(500).fadeIn(500, blink);
})();
感谢Alnitak提出了一个更好的方法。
演示(Blinker使用jQuery)
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@-webkit-keyframes blinker { 0%{不透明度:1.0;｝ 50%{不透明度:0.0;｝ 100%{透明度:1.0;｝ ｝ .blink { 宽度:10 px; 高度:10 px; border - radius: 10 px; 动画:眨眼2s线性无限; 背景颜色:红色; margin-right: 5 px; ｝ .content { 显示:flex; flex-direction:行; 对齐项目:中心; ｝ < div class = "内容" > <我类=“眨眼”> < / i > 生活 < / div >
