目前,我有这样的代码:

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


当前回答

晚了,但想添加一个新的与更多的关键帧…下面是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>

其他回答

我使用class=blink对各自的元素进行处理

简单JS代码

// Blink
      setInterval(function()
        {

        setTimeout(function()
        {

        //$(".blink").css("color","rgba(0,0,0,0.1)"); // If you want simply black/white blink of text
        $(".blink").css("visibility","hidden"); // This is for Visibility of the element  


        },900);


        //$(".blink").css("color","rgba(0,0,0,1)");  // If you want simply black/white blink of text
        $(".blink").css("visibility","visible");  // This is for Visibility of the element

        },1000);

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

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

获得纯“100%开,100%关”闪烁的最好方法,就像老的<blink>是这样的:

.blink { 动画:眨眼器1s步开始无限; } @keyframes blinker { 50% { 透明度:0; } } < div class = "眨眼”>眨眼< / 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; } 
}

我的解决方案:

.blink { 动画:blinkMe 2s线性无限; } @keyframes blinkMe { 0% { 透明度:0; } 50% { 透明度:1; } 100% { 透明度:0; } } < p class = "眨眼”>眨眼< / p >

我使用blinkMe作为动画的名称,2s作为持续时间,线性的时间,无限的,这样它就会永远重复。

我们需要使用JavaScript和jQuery的旧浏览器,因为他们不支持动画和/或@keyframes:

$(文档)时函数(){ setinterval(函数(){ $ (" .blink ") .fadeIn (1000) .fadeOut (1000); },2000) }); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js " > < /脚本> < p class = "眨眼”>眨眼< / p >

如果你想做一个闪烁效果,就像闪烁标签一样,这将会起作用:

.blink { 动画:眨眼0.5s步启动无限; } @keyframes blink { 0% { 透明度:1; } 50% { 透明度:0; } 100% { 透明度:1; } } < p class = "眨眼”>眨眼< / p >

如果您想调整速度,请更改持续时间。