目前,我有这样的代码:

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


当前回答

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

其他回答

使用动画方向的替代值(你不需要这样添加任何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>

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

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

我的解决方案:

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

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

或者,如果你不想在显示和隐藏之间逐渐过渡(例如,闪烁的文本光标),你可以使用这样的东西:

/* 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 .游标将从可见变为隐藏。

如果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元素,它们仍然会与其他.cursor元素在同一时间动画,因为状态是共享的,据我所知,这在CSS中是不可能的。