目前,我有这样的代码:

@-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。这可能吗?


当前回答

我不知道为什么,但动画只有可见性属性是不工作在任何浏览器。

你能做的就是使不透明属性动画化,这样浏览器就没有足够的帧来淡入或淡出文本。

例子:

跨度{ 透明度: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 >

我不知道为什么,但动画只有可见性属性是不工作在任何浏览器。

你能做的就是使不透明属性动画化,这样浏览器就没有足够的帧来淡入或淡出文本。

例子:

跨度{ 透明度:0; 动画:眨眼1s线性无限; } @关键帧闪烁{ 从, 49.9% { 透明度:0; } 50%, , { 透明度:1; } } 我正在闪烁文本</span>

改变持续时间和不透明度以适应。

.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; } 
}

如果你想要平滑的动画,试试这个。

    .blink {
        animation: blinker 1s infinite;
    }
      
    @keyframes blinker {
        from { opacity: 1.0; }
        50% { opacity: 0.5; }
        to { opacity: 1.0; }
    }
    <span class="blink">I am blinking</span>