CSS 3 ile yanıp sönen / yanıp sönen metin nasıl yapılır

Şu anda, bu kodu var:

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

Yanıp sönüyor, ancak yalnızca "tek yönde" yanıp sönüyor. Yani, sadece kayboluyor ve sonra tekrar ortaya çıkıyor opacity: 1.0, sonra tekrar kayboluyor, tekrar ortaya çıkıyor vb.

Ben solmaya ve daha sonra tekrar bu solmaya "yükseltmek" istiyorum opacity: 1.0. Mümkün mü?

Önce ayarlıyorsunuz opacity: 1;ve sonra onu bitiriyorsunuz 0, bu yüzden başlıyor 0%ve bitiyor 100%, bu yüzden sadece opaklığı 0at olarak ayarlayın 50%ve gerisi kendi kendine halledecektir.

gösteri

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<div class="blink_me">BLINK ME</div>

İşte, olmaya animasyon süresini kuruyorum 1 second, sonra kuruyorum timingiçin linear. Bu, boyunca sabit olacağı anlamına gelir. Son olarak kullanıyorum infinite. Bu, devam edeceği anlamına gelir.

Not: Bu sizin için işe yaramazsa, kullanım tarayıcı önek gibi -webkit, -mozvb için gerekli olan animationve @keyframes. Ayrıntılı koduma buradan başvurabilirsiniz

Yorumlandığı gibi, bu Internet Explorer'ın eski sürümlerinde çalışmaz ve bunun için jQuery veya JavaScript kullanmanız gerekir ...

(function blink() {
  $('.blink_me').fadeOut(500).fadeIn(500, blink);
})();

^{Alnitak'a daha iyi bir yaklaşım önerdiği için teşekkürler .}

Demo (jQuery kullanarak göz kırpma)

alternateDeğerini kullanın animation-direction(ve bu şekilde herhangi bir kefram eklemenize gerek yoktur).

alternate

Animasyon her döngüde yönü tersine çevirmelidir. Ters oynatılırken, animasyon adımları geriye doğru gerçekleştirilir. Ayrıca, zamanlama fonksiyonları da tersine çevrilir; örneğin, bir tersine çevirme animasyonu, ters oynatıldığında bir hareketsizlik animasyonu ile değiştirilir. Eşit veya tek bir yineleme olup olmadığını belirleyen sayı birde başlar.

CSS :

.waitingForConnection {
  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
@keyframes blinker { to { opacity: 0; } }

Ana fromkareyi kaldırdım . Eksikse, öğedeki animasyonlu özellik için ayarladığınız değerden ( opacitybu örnekte) veya bunu ayarlamadıysanız (ve bu durumda yapmadıysanız) varsayılan değerden oluşturulur. (bunun 1için opacity).

Ve lütfen sadece WebKit sürümünü kullanmayın. Önceden düzeltilmemiş olanı da ekleyin. Sadece daha az kod yazmak istiyorsanız , stenoyu kullanın .

Eski gibi saf bir "% 100 açık,% 100 kapalı" yanıp sönmenin en iyi yolu <blink>şudur:

.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<div class="blink">BLINK</div>

Alternatif olarak, göster ve gizle (örneğin yanıp sönen bir metin imleci) arasında kademeli bir geçiş istemiyorsanız aşağıdaki gibi bir şey kullanabilirsiniz:

/* 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;
}

Her 1s .cursorgelen gidecek visiblekadar hidden.

CSS animasyonu desteklenmiyorsa (örneğin, Safari'nin bazı sürümlerinde) bu basit JS aralığına geri dönebilirsiniz:

(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);
})()

Bu basit JavaScript aslında çok hızlıdır ve çoğu durumda CSS'den daha iyi bir varsayılan olabilir. JS animasyonlarını yavaşlatan çok sayıda DOM çağrısı olduğunu belirtmek gerekir (örn. JQuery's $ .animate ()).

Ayrıca, .cursordaha sonra eleman eklerseniz .cursor, devlet paylaşıldığından beri diğerleriyle tam olarak aynı anda animasyon yapacakları ikinci avantajı vardır , bu bildiğim kadarıyla CSS ile imkansızdır.

Neden bilmiyorum ama sadece visibilityözelliği animasyon herhangi bir tarayıcı üzerinde çalışmıyor.

Yapabileceğiniz şey opacityözelliği, tarayıcının metinde solmaya veya çıkmaya yetecek çerçeveye sahip olmayacak şekilde canlandırmasıdır .

Misal:

span {
  opacity: 0;
  animation: blinking 1s linear infinite;
}

@keyframes blinking {
  from,
  49.9% {
    opacity: 0;
  }
  50%,
  to {
    opacity: 1;
  }
}

<span>I'm blinking text</span>

Süreyi ve opaklığı uygun şekilde değiştirin.

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

@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

.blink {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  animation: blinker 2s linear infinite;
  background-color: red;
  margin-right: 5px;
}

.content {
  display: flex;
  flex-direction: row;
  align-items: center;
}

<div class="content">
  <i class="blink"></i>
  LIVE
</div>

Geç oldu ancak daha fazla anahtar kareye sahip yeni bir tane eklemek istedim ... yerleşik kod snippet'leriyle ilgili bir sorun olduğundan CodePen'de bir örnek :

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

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

İlgili eleman (lar) için class = blink kullanarak benim için çalışır

Basit JS Kodu

// 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);