目前,我有这样的代码:

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


当前回答

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

这是每个人的好榜样。试一试

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

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