Teks & Image dg Efek Kedip (Blink Effect) css3 AnimationClick here to get more tutorials!

Sekalipun dengan mudah kita dapat membuat efek berkedip dengan menggunakan blink efek melalui text-decoration property (blink), namun efek kedip ini hanya bisa digunakan pada teks. Dengan memanfaatkan kode css3 animation, sebuah efek kedip bisa digunakan untuk semua hal. Anda bisa menerapkannya pada image, teks, box atau yang lainnya. Membuatnya terhitung cukup mudah dan kode yang digunakanpun tidak terlalu banyak. Anda bisa memanfaatkannya melalui "class", "id" atau menggunakan "syntax bebas" yang saat ini juga didukung oleh semua browser.

Kode css3 animation untuk membuat efek kedip

Di bawah ini disertakan dua macam bentuk kode dengan efek yang hampir tak ada bedanya. Anda bisa pilih salah satu untuk digunakan.

Kode css-1

@keyframes GRblink_anima{0%{opacity:1.0}60%{opacity:1.0}61%{opacity:0}99%{opacity:0}100%{opacity:1.0}}
@-o-keyframes GRblink_anima{0%{opacity:1.0}60%{opacity:1.0}61%{opacity:0}99%{opacity:0}100%{opacity:1.0}}
@-ms-keyframes GRblink_anima{0%{opacity:1.0}60%{opacity:1.0}61%{opacity:0}99%{opacity:0}100%{opacity:1.0}}
@-moz-keyframes GRblink_anima{0%{opacity:1.0}60%{opacity:1.0}61%{opacity:0}99%{opacity:0}100%{opacity:1.0}}
@-webkit-keyframes GRblink_anima{0%{opacity:1.0}60%{opacity:1.0}61%{opacity:0}99%{opacity:0}100%{opacity:1.0}}
.GRkedip{
    animation:GRblink_anima 1s infinite;
    -o-animation:GRblink_anima 1s infinite;
    -ms-animation:GRblink_anima 1s infinite;
    -moz-animation:GRblink_anima 1s infinite;
    -webkit-animation:GRblink_anima 1s infinite;
}

xHTML kedip-1:

Untuk menciptakan fungsi kedip, tambahkan "class="GRkedip" pada xHTML yang akan digunakan.

Contoh:

<div class="GRkedip" style="margin:20px auto;text-align:center;width:400px;height:200px;background:red;"></div>

<img class="GRkedip" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQwjx3Ay1_fBDnGKZaFQwgtW5KnjY5Vp44nvY-KxMtCsH7GY0m-vPKUtNz8BMGb0uf7deSziP0Nsq-cm6LnX778EIEdsoF4hpXfVRWE52lBLQefCsq8Q58TDZ0IzfSs-54wzHcTg7OM0k/" width="250" height="158" style="float:left;margin:0 15px 5px 0;" />

<a class="GRkedip" href="http://gubhugreyot.blogspot.com" title="Tutorial Efek kedip dengan css3 animation">Blink Effect css3 Animation</a>

Kode css-2

@keyframes GRblink_anima2{from,to{ opacity:0}60%{opacity:1}}
@-o-keyframes GRblink_anima2{from,to{ opacity:0}60%{opacity:1}}
@-ms-keyframes GRblink_anima2{from,to{ opacity:0}60%{opacity:1}}
@-moz-keyframes GRblink_anima2{from,to{ opacity:0}60%{opacity:1}}
@-webkit-keyframes GRblink_anima2{from,to{opacity:1}60%{opacity:0}}
.GRkedip2{
    animation: 1s GRblink_anima2 step-end infinite;
    -o-animation: 1s GRblink_anima2 step-end infinite;
    -ms-animation: 1s GRblink_anima2 step-end infinite;
    -moz-animation: 1s GRblink_anima2 step-end infinite;
    -webkit-animation: 1s GRblink_anima2 step-end infinite;
}

xHTML kedip-2:

Untuk menciptakan fungsi kedip, tambahkan "class="GRkedip2" pada xHTML yang akan digunakan.

Contoh:

<div class="GRkedip2" style="margin:20px auto;text-align:center;width:400px;height:200px;background:red;"></div>

<img class="GRkedip2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQwjx3Ay1_fBDnGKZaFQwgtW5KnjY5Vp44nvY-KxMtCsH7GY0m-vPKUtNz8BMGb0uf7deSziP0Nsq-cm6LnX778EIEdsoF4hpXfVRWE52lBLQefCsq8Q58TDZ0IzfSs-54wzHcTg7OM0k/" width="250" height="158" style="float:left;margin:0 15px 5px 0;" />

<a class="GRkedip2" href="http://gubhugreyot.blogspot.com" title="Tutorial Efek kedip dengan css3 animation">Blink Effect css3 Animation</a>

Keterangan:

1. Kode css dapat disimpan ditemplate dengan meletakkan kode css di atas kode ]]></b:skin>
2. Nilai 1s dapat dirubah untuk mengatur kecepatan kedip.