Cara membuat teks berkedip / berkedip dengan CSS 3

288

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?

ojek
sumber
1
Jika Anda melihat di sebelah kanan halaman ini, ada kolom berjudul Terkait dengan banyak topik 'terkait'. Lihatlah beberapa dari mereka .. Anda akan dapat mempelajari semua yang Anda butuhkan.
Milche Patern
2
Anda dapat mengambil kursus cepat tentang transisi css di bradshaw: css3.bradshawenterprises.com
Milche Patern
82
Jangan tersinggung, jika dia ingin mengedipkan teksnya, dia ingin mengedipkan teksnya. Tidak masalah tahun berapa itu. Orang paling inovatif di dunia adalah mereka yang tidak hidup dengan aturan. Justru sebaliknya, mereka biasanya mematahkannya dan selanjutnya, semua orang menyalinnya. Saya kira Apple adalah contoh yang bagus. Begitu juga Mackie dll. Saya akan merasa lebih baik jika orang hanya menyimpan pendapat mereka sendiri dan hanya menjawab pertanyaan langsung :-) Seperti yang dikatakan, jangan tersinggung. Kedengarannya agak kasar tetapi saya tidak ingin memprovokasi tidak menyinggung siapa pun. Tidak ada perasaan keras. ;-)
Lawrence
2
Kemungkinan duplikat dari Meniru blink tag dengan animasi CSS3
Michael Freidgeim

Jawaban:

657

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)

Pak Alien
sumber
7
Hanya memperhatikan bahwa ini, diterapkan pada satu elemen teks, mengkonsumsi jumlah CPU yang konyol di komputer saya menggunakan firefox. Awas.
Alex
2
jawaban terbaik untuk menjadi solusi yang paling mudah dimengerti
elad silver
4
@ Mr.Alien tidak ada sinkronisasi antara keduanya - fades akan memakan waktu sedikit lebih lama dari timer (dan timer juga tidak dapat diandalkan) dan akhirnya Anda mungkin akan berakhir dengan antrian animasi tanpa batas yang antri pada elemen. Pendekatan yang benar akan dilakukan tanpa timer dan panggilan "secara rekursif" blinkersebagai panggilan balik penyelesaian .fadeInpanggilan.
Alnitak
3
@ Mr.Alien juga semuanya hanya bisa menjadi IIFE - baris yang satu ini akan melakukan semuanya termasuk doa awal: (function blink() { $('.blink_me').fadeOut(500).fadeIn(500, blink); })();
Alnitak
2
step-endbukannya linearapa yang saya inginkan.
Alex S
71

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 .

Ana
sumber
Bagaimana membuatnya berkedip lebih cepat? Mengubah 1.7s mengacaukannya.
Alex G
1
@AlexG Anda dapat mengganti cubic-bezierbagian dengan ease-in-outatau sesuatu yang lain: cubic-bezier.com
Danilo Bargen
+ Satu untuk kubik-bezier, karena semua hal menarik adalah non-linear
Agnius Vasiliauskas
57

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>

Timmmm
sumber
5
Satu-satunya solusi "blink" yang sebenarnya. Dan juga bekerja dengan colorproperti dll. Hal-hal lain adalah workarounds atau animasi "fade".
Martin Schneider
15

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.

MattSturgeon
sumber
Ini berfungsi KECUALI untuk iOS Safari. Ada ide bagaimana membuatnya bekerja di Safari?
Joe Orost
@ Jooe Frost Saya telah memasukkan alternatif JS untuk browser yang tidak mendukung animasi CSS. Menurut pendapat saya itu sebenarnya bisa menjadi solusi yang lebih baik secara umum!
MattSturgeon
14

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>

Josephketres
sumber
2
Ini konyol - gunakan saja step-start(lihat jawaban saya).
Timmmm
Sempurna, hanya apa yang saya cari. Jempolan.
Samuel Ramzan
9

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; } 
}
James Hilliard
sumber
9
@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

on15
sumber
4

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>

hsobhy
sumber
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>
Shahaji
sumber
0

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);
Alfa
sumber