Cara Menerapkan Webkit Animation CSS Blink Pada Teks dan Gambar

Menambahkan efek blink pada teks atau gambar menggunakan jquery sudah pernah saya bahas sebelumnya, namun apabila diterapkan pada template blog AMP, maka hasilnya akan terjadi kesalahan pada struktur AMP template dan sistem penganalisa mesin AMP google akan memberikan logo AMP merah pada template anda, beda jika struktur template anda memenuhi syarat AMP, maka logo hijau AMP akan anda dapatkan.

Solusi untuk menerapkan efek blink pada template AMP adalah dengan CSS/style, kenapa menggunakan CSS? jawabannya, karena CSS itu tidak harus mengandung unsur AMP didalamnya, beda halnya kalau pakai script atau jquery yang harus mengandung unsur AMP.

CSS/style yang saya bagikan ini di dapat dari hasil membongkar template kenpunyaan sendiri yang dijadikan objek pembelajaran bagi saya pribadi. Dibawah ini merupakan contoh sederhana webkit animation teks dan gambar.

CSS/style untuk teks blink terus menerus.

.blink-teks {-webkit-animation:flash 1s linear 1s infinite normal;animation:flash 1s linear 1s infinite normal}

@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}

@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}

Penerapan pada objek menggunakan class, sebagai contoh teks blink dibawah.

<div id="blink-teks"> Teks Blink </div>

Maka hasilnya akan seperti ini.

Teks Blink

Apabila ingin ditambah hover pada teks sehingga pada saat di sorot akan efek blink akan berhenti, maka CSS/style harus ditambah sehingga menjadi seperti contoh dibawah.

.blink-teks {-webkit-animation:flash 1s linear 1s infinite normal;animation:flash 1s linear 1s infinite normal}

@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}

@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}

.blink-teks:hover {-webkit-animation:non}

Maka akan menghasilkan efek seperti ini.

Teks Blink

Dan bisa juga diterapkan sebaliknya, yaitu ketika disorot efek blink akan berfungsi, maka CSS/style-nya seperti ini.

.blink-teks {-webkit-animation:non}

.blink-teks:hover {-webkit-animation:flash 1s linear 1s infinite normal;animation:flash 1s linear 1s infinite normal}

@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}

@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}

Hasilnya bisa dilihat dibawah ini.

Teks Blink

Untuk penerapan efek blink pada image atau gambar CSS/style-nya sama seperti diatas, contoh dibawah ini untuk image blink terus menerus.

.blink-img img {-webkit-animation:flash 1s linear 1s infinite normal;animation:flash 1s linear 1s infinite normal}

@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}

@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}

Contoh penerapannya sebagai berikut.

<div class="blink-img img">

<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk-vfOCvKhtneRcRG0bmVKG4HdUz0kf3e7qLiHJnTUysm40TxD6BunW4oF9t4AV8jnBLhD22u5ErMJ9ZmkR_6S8BlvRivu0i9c6j1bWb0gbFzmVbb0bQT2KXKyezKrhJp5hc4R5q2y6Ws/s1600/sd05.png"

      width="347"

      height="50"

      layout=""

      alt="an image"></amp-img>

</div>

Inilah hasil yang didapat dari CSS/style diatas.

Untuk penerapan efek blink pada image/gambar saat hover berhenti, maka CSS/style-nya dibawah ini.

.blink-img img {-webkit-animation:flash 1s linear 1s infinite normal;animation:flash 1s linear 1s infinite normal}

@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}

@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}

.blink-img img:hover {-webkit-animation:non}

Efek CSS/style diatas bisa anda perhatikan contoh dibawah.

Blink pada image/gambar saat hover, bisa pakai CSS/style-nya dibawah ini.

.blink-img img {-webkit-animation:non}

.blink-img img:hover {-webkit-animation:flash 1s linear 1s infinite normal;animation:flash 1s linear 1s infinite normal}

@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}

@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}

Penagruhnya terhadap objek dapat dilihat paga gambar dibawah.

Demikian sekedar berbagi sebagian kecil pengalaman, jika kurang dipahami silahkan tinggalkan pesan.