Cara Membuat CSS Animasi Hover Keren

Cara Membuat CSS Animasi Hover Keren - Ada banyak cara untuk mempercantik tampilan Blog atau website. Beberapa diantaranya adalah kombinasi warna, layout, fitur, efek animasi dan masih banyak lagi. Nah, kali ini admin akan memberikan tutorial bagaimana cara membuat css animasi pada konten blog atau website agar terlihat lebih cantik, dalam hal ini khususnya untuk efek Hover yang jika kita mengarahkan kursor ke link, icon atau konten lainnya, maka akan memberikan efek hover yang cantik bukan hanya pergantian warna saja.

Cara Membuat CSS Animasi Hover Keren

Trik yang admin pakai adalah menggunakan atribut animation yang sudah diatur melalui keyframe. Jadi, admin bermaksud memberikan efek goyang memantul pada icon yang tersorot oleh kursor.

Berikut ini adalah pengaturan keyframe nya :

/* Animation */
@keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}

Tapi sebelum itu, untuk mempercantik tampilan, admin menggunakan tambahan Css Fontawesome. Ini hanya sebatas pilihan. Jika kamu ingin menggunakan animasi pada teks, tidak usah menggunakan fontawesome.

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'/>

Lalu, langkah pentingnya adalah menambah atribut animation rubberBand yang sebelumnya dibuat. Tambahkan pada Class atau Id. Contoh :

.icon a:hover {animation:rubberBand 1s;}

Selesai.

PREVIEW