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/AVvXsEjv0f5qCowyE9C1tA7qj685lgPI1eQTQHHRAJ0nZtahvgJsePGkc_mk2cKujn2xgvwzlpCJx6vHLCDgNpm74OpQzIGZEXcbRX-EngTXzPtZPyAbgCUo_YzJXvTGzw-DY851B39MBHBjMPw/" 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/AVvXsEjv0f5qCowyE9C1tA7qj685lgPI1eQTQHHRAJ0nZtahvgJsePGkc_mk2cKujn2xgvwzlpCJx6vHLCDgNpm74OpQzIGZEXcbRX-EngTXzPtZPyAbgCUo_YzJXvTGzw-DY851B39MBHBjMPw/" 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:
- Kode css dapat disimpan ditemplate dengan meletakkan kode css di atas kode ]]></b:skin>
- Nilai 1s dapat dirubah untuk mengatur kecepatan kedip.
