Cara Membuat Teks Blink di Web Site/Blog

Bagaimana Cara Membuat Teks Berkedip (Blink) di Web Site atau Web Blog?

Sebenarnya ini berawal dari rasa penasaran saya, untuk membuat tulisan berkedip pada salah satu blog yang saya kelola. Namun setelah mencari kesana-kemari tak kunjung menemukan cara membuat teks atau tulisan berkedip (blink) yang benar-benar efektif.

Kebanyakan beberapa posting hanya membahas tentang cara menyisipkan kode <blink>Teks</blink> dan tidak fungsi/bekerja. Entah kenapa saya belum tau pasti, kemungkinan karena tidak ada kode css, script pendukung atau browser yang digunakan tidak mendukung. Sayapun merasa jenuh dan berhenti mencari Cara Membuat Teks Blink di Web Site/Blog.

Berselang beberapa bulan rasa penasaran saya kembali muncul, saya coba cari disalah satu forum terkemuka yaitu http://stackoverflow.com disana tempat berkumpulnya para ahli coding yang kadang dapat menjawab setiap pertanyaan mengenai berbagai permasalahan seputar HTML.

OK! Langsung saja saya bagikan kodenya:

1.) Cara mudah membuat teks blink,

taruh kode dibawah, sebelum </b:skin> 

blink {
animation-duration: 400ms;
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
}

@keyframes blink {
from { opacity: 1;
}
to
{ opacity: 0;
}
}

kode pemanggil <blink>Tulisan berkedip disini</blink>

2.) Cara membuat teks blink dengan css,

taruh kode dibawah, sebelum </b:skin>
@keyframes
blink {
from { opacity: 1;
}
to { opacity: 0;
}
}

@-webkit-keyframes
blink {
from { opacity: 1;
}
to { opacity: 0;
}
}

blink {
animation-name: blink;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
-webkit-animation-name: blink;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
}

kode pemanggil <blink>Tulisan berkedip disini</blink>

3.) Cara mudah membuat teks blink dengan animasi css,

a { animation-duration: 400ms;
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
}

dapat mengubah warna teks berkedip sesuai kesukaan kalian,

@keyframes blink {
0% {
opacity: 1;
color: pink;
}

25% {
color: green;
opacity: 0;
}

50% {
opacity: 1;
color: blue;
}

75% {
opacity: 0;
color: orange;
}

100% {
opacity: 1;
color: pink;
}
}


Keterangan cara 3.) : <a href="#">Blink</a> untuk a  (animation) semua link aktif

atau mengganti a (warna hijau) dengan blink, sehingga menjadi

<a href="#"><blink>Tulisan berkedip disini</blink></a>

---

Alternatif lain:

b { animation-duration: 1000ms;
animation-name: tgle;
animation-iteration-count: infinite;
}

@keyframes tgle {
0% {
opacity: 0;
}
49.99% {
opacity: 0;
}
50% {
opacity: 1;
}
99.99% {
opacity: 1;
}
100% {
opacity: 0;
}
}

Sekian terimakasih, jangan lupa tinggalkan komentarnya.