Cara membuat teks berkedip / berkedip dengan CSS 3

Saat ini, saya memiliki kode ini:

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

Berkedip, tetapi hanya berkedip "satu arah". Maksudku, itu hanya memudar, dan kemudian muncul kembali opacity: 1.0, kemudian memudar lagi, muncul lagi, dan seterusnya ...

Saya ingin memudar, dan kemudian "bangkit" dari ini memudar lagi ke opacity: 1.0. Apakah itu mungkin?

Anda Pengaturan pertama opacity: 1;dan kemudian Anda berakhir pada 0, sehingga dimulai dari 0%dan berakhir pada 100%, jadi bukan hanya mengatur opacity untuk 0di 50%dan sisanya akan mengurus dirinya sendiri.

Demo

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

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

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

Di sini, saya mengatur durasi animasi menjadi 1 second, dan kemudian saya mengatur timinguntuk linear. Itu berarti akan konstan sepanjang. Terakhir, saya menggunakan infinite. Itu berarti akan terus dan terus.

Catatan: Jika ini tidak berhasil untuk Anda, gunakan awalan peramban seperti -webkit, -mozdan sebagainya sesuai kebutuhan untuk animationdan @keyframes. Anda dapat merujuk ke kode terperinci saya di sini

Seperti yang dikomentari, ini tidak akan berfungsi pada versi Internet Explorer yang lebih lama, dan untuk itu Anda perlu menggunakan jQuery atau JavaScript ...

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

^{Terima kasih kepada Alnitak karena menyarankan pendekatan yang lebih baik .}

Demo (Blinker menggunakan jQuery)

Gunakan alternatenilai untuk animation-direction(dan Anda tidak perlu menambahkan keframe dengan cara ini).

alternate

Animasi harus membalikkan arah setiap siklus. Saat diputar secara terbalik, langkah-langkah animasi dilakukan mundur. Selain itu, fungsi pengaturan waktu juga terbalik; misalnya, animasi yang mudah diganti dengan animasi yang mudah digunakan ketika diputar secara terbalik. Hitungan untuk menentukan apakah iterasi genap atau ganjil dimulai dari satu.

CSS :

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

Saya telah menghapus fromkeyframe. Jika tidak ada, itu dihasilkan dari nilai yang Anda tetapkan untuk properti animasi ( opacitydalam hal ini) pada elemen, atau jika Anda belum menyetelnya (dan Anda belum dalam hal ini), dari nilai default (yang 1untuk opacity).

Dan tolong jangan hanya menggunakan versi WebKit. Tambahkan yang tidak diperbaiki setelahnya juga. Jika Anda hanya ingin menulis lebih sedikit kode, gunakan singkatan .

Cara terbaik untuk mendapatkan blink "100% aktif, 100% diskon" murni, seperti yang lama <blink>adalah seperti ini:

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

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

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

Atau jika Anda tidak menginginkan transisi bertahap antara acara dan sembunyikan (mis. Kursor teks yang berkedip), Anda bisa menggunakan sesuatu seperti:

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

Setiap 1s .cursorakan berubah dari visiblemenjadi hidden.

Jika animasi CSS tidak didukung (misalnya dalam beberapa versi Safari) Anda dapat mundur ke interval JS sederhana ini:

(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 sederhana ini sebenarnya sangat cepat dan dalam banyak kasus bahkan mungkin merupakan default yang lebih baik daripada CSS. Perlu dicatat bahwa banyak panggilan DOM yang membuat animasi JS lambat (mis. $ .Animate () JQuery).

Ini juga memiliki keuntungan kedua bahwa jika Anda menambahkan .cursorelemen nanti, mereka masih akan hidup pada waktu yang sama persis dengan yang lain .cursorsejak negara dibagikan, ini tidak mungkin dengan CSS sejauh yang saya ketahui.

Saya tidak tahu mengapa tetapi hanya menganimasikan visibilityproperti tidak bekerja di browser apa pun.

Apa yang dapat Anda lakukan adalah menghidupkan opacityproperti sedemikian rupa sehingga browser tidak memiliki cukup bingkai untuk memudar masuk atau keluar teks.

Contoh:

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>

Ubah durasi dan opacity agar sesuai.

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

Terlambat tetapi ingin menambahkan yang baru dengan lebih banyak kerangka kunci ... di sini adalah contoh pada CodePen karena ada masalah dengan cuplikan kode bawaan:

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

Ini bekerja untuk saya dengan menggunakan class = blink untuk masing-masing elemen

Kode JS sederhana

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