Hover Link Color With CSS3 Keyframe

Hover Link Berwarna Dengan CSS3 Keyframe - Metodenya adalah bagaimana ketika menciptakan effect berwarna pada link tanpa menggunakan Javascript. Jika di blog - blog lain sudah banyak tutorial seperti ini tapi menggunakan Javascript tapi sekarang yang akan saya bahas adalah menggunakan Css3 @Keyframe yaitu animasi yang terbuat dari css3. Jika browser anda tidak mendukung css3 maka trik ini tidak akan bisa anda lihat hasil kerjanya.

1. Cari kode a:hover dalam template anda.
2. Setelah ketemu hapus dan ganti dengan kode di bawah ini

a:hover {
    animation-name: warna;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes warna {
  0% { color:red;}
  5% { color:purple;}
  10% { color:black;}
  15% { color:green;}
  20% { color:blue;}
  40% { color:red; }
  45% { color:pink; }
  50% { color:orange; }
  55% { color:aqua; }
  60% { color:orange; }
  80% { color:darkgray; }
  90% { color:lime; }
  100% { color:yellow; }
}

3. Terakhir save template anda..
Demo : Silahkan arahkan mouse ke --> Hover Link Color With CSS3 Keyframe
Semoga bermanfaat.

Tweet