Cara menggunakan css animasi warna hover

Menatap nyala api yang berkedip-kedip, menyaksikan deburan ombak di pantai, melihat sekilas harimau yang hendak menerkam, dunia adalah sebuah gerakan.

Kami sangat pandai memperhatikan dan bereaksi terhadap gerakan. itu tertanam di otak kita dan merupakan bagian penting dari cara kita memahami dunia di sekitar kita

Saat kita duduk untuk mendesain situs web, kita membuat sesuatu yang akan berkomunikasi dengan pengunjung kita. Animasi adalah salah satu cara untuk melakukannya

Komunikasi

Seringkali saat mendesain situs web, kami memikirkan konten, tata letak, gaya, font, dan warna. Tapi kita juga bisa berkomunikasi melalui gerakan. Alih-alih menganggap animasi sebagai sesuatu yang terpisah dari proses desain, cara benda bergerak adalah aspek lain dari desain kami yang bekerja dan berkomunikasi dengan yang lainnya.

Semua hal ini ditambahkan untuk menjadikan merek kami dan pengalaman yang kami harap bermanfaat

Kami berharap desain kami mengkomunikasikan konten kami secara efektif, menyampaikan perhatian besar kami pada detail, dan membuat pengunjung senang. Karena pengunjung kami hebat dalam memperhatikan dan memahami gerakan, animasi adalah alat yang penting dan ampuh

Awal yang sederhana

Contoh animasi sederhana yang kita lihat di mana-mana adalah efek mengambang. Rasanya aneh mengagumi konsep sederhana ini sekarang, tetapi ketika pertama kali diperkenalkan, itu adalah masalah besar

Dulu ketika web pertama kali terbentuk, kami memiliki dokumen yang terhubung melalui hyperlink. Tautan ini, untuk mengomunikasikan perbedaannya dari teks di sekitarnya, diberi warna biru dan digarisbawahi. Kursor juga akan mengubah gaya penunjuk

Ketika diklik mereka akan berubah menjadi ungu untuk menunjukkan bahwa tautan tersebut aktif, atau telah dikunjungi. Warna digunakan sebagai cara untuk mengomunikasikan status tautan. Barang yang cukup bagus

Lalu datanglah CSS. Pada awal tahun 1998,. Pemilih hover tiba. Tiba-tiba kita bisa berbuat lebih banyak. Alih-alih mengandalkan perubahan kursor mendadak, kita dapat menerapkan gaya ke tautan itu sendiri saat kursor berada di depannya

a:hover {
  color: red;
}

Dengan perubahan kecil ini, kita bisa lebih banyak berkomunikasi. Daftar tautan menjadi taman bermain interaktif saat kami menari dengan gembira di sekitar kursor kami, mendapatkan umpan balik langsung dari warna tautan

Ini bukan hanya untuk bersenang-senang. Perubahan warna menambahkan lebih banyak informasi tentang apa yang terjadi di layar. Kita manusia, sangat bagus untuk memperhatikan gerakan atau ketika keadaan berubah, manfaat dari informasi tambahan ini. Tapi kita bisa berbuat lebih banyak

Berikan lebih banyak informasi

Alih-alih berhenti mengubah warna, kita juga bisa menambahkan animasi. Membuat perubahan warna memberi mata kita lebih banyak kesempatan untuk memperhatikan perubahan, karena menariknya keluar dalam jangka waktu yang lebih lama. Perubahan animasi lebih mudah dilihat daripada perubahan mendadak

a {
  transition: color 0.2s;
}
a:hover {
  color: red;
}

Dengan ini kami menambahkan transisi ke jangkar CSS. Saat link berada di atas, browser akan menganimasikan warna teks dari biru (atau ungu) menjadi merah selama 0,2 detik

Ambil lebih jauh

Ini mungkin tidak terlihat seperti banyak tetapi alat sederhana bahkan membuka dunia komunikasi yang dapat kita gunakan untuk menambah kehidupan pada desain kita

Dengan kemampuan menyampaikan informasi melalui gerakan, kami dapat menarik perhatian ke bagian halaman kami yang telah berubah, menandai kedatangan atau penghapusan konten, menunjukkan kepada pengunjung kami apa yang harus dilihat selanjutnya, dan banyak lagi.

Beberapa cara animasi dapat menambah nilai pada desain

• Sorot konten interaktif
• Tambahkan atau hapus konten
• Bercerita
• Minat
• Kredibilitas
• Merek dan kesenangan

Sorot konten interaktif

Mengarahkan tautan adalah salah satu cara animasi dapat menambah nilai, tetapi kita dapat melangkah lebih jauh. Tip alat, mengubah gaya desain, dan perubahan visual lainnya dapat membuat halaman Anda terasa lebih hidup dan mendorong pengunjung untuk memilih, mengetuk, atau berinteraksi dengan konten Anda. Area yang dapat diseret dapat diperluas atau disorot saat disentuh, gambar hitam putih dapat berubah warna, dan lainnya

Tambahkan atau hapus konten

Jika konten di halaman tiba-tiba menghilang atau muncul, kami mungkin menyadarinya. Tapi hanya itu yang kami tahu. Kami tidak tahu kemana perginya, dan mungkin mengapa. Ini adalah kesempatan untuk menambahkan beberapa animasi

Menambahkan baris tambahan ke daftar agenda, memindahkan panel kontrol, atau meminimalkan konten ke sudut halaman, semuanya mendapat manfaat dari animasi. Dengan menunjukkan dari mana item berasal dan ke mana mereka pergi, pengunjung kami menjaga koneksi dengan halaman dan lebih memahami cara kerjanya

Bercerita

Kami tidak terbatas pada teks atau bahkan gambar statis di halaman web kami. Dengan memindahkan elemen, menambahkan elemen baru, atau menghapusnya, Anda dapat membawa pengunjung Anda dalam perjalanan dan memberi mereka informasi yang lebih baik

Beranda di Mailchimp adalah contoh yang bagus untuk ini. Di tengah layar mereka menggunakan beberapa elemen HTML dan beberapa animasi CSS untuk menjelaskan cara membuat email

Sementara kami dapat melakukan hal seperti ini dengan Flash belum lama ini, kami sekarang dapat melakukannya tanpa bergantung pada plugin dan pada saat yang sama menjaga situs kami tetap cepat, mudah diakses, dan responsif

Memanggil Perhatian

Kami hebat dalam memperhatikan ketika sesuatu berubah secara visual. Fitur ini adalah sesuatu yang bisa kita gunakan untuk menarik perhatian ke area tertentu. Penggunaan umum untuk ini adalah saat beberapa konten diperbarui di halaman dan kami membuatnya berkedip atau berubah warna

Kita dapat mengambil ini lebih jauh dan membuat tombol register naik sedikit ketika halaman pertama dimuat seolah-olah mengatakan "hai, saya penting", atau kita dapat menyarankan artikel melayang dari sisi layar ketika pengunjung mencapai akhir yang sebelumnya

Dilakukan dengan hati-hati, animasi adalah cara yang sangat ampuh untuk menarik perhatian pada apa yang kita ingin orang perhatikan

Kredibilitas

Hal yang sering tidak diperhatikan adalah efek animasi yang baik dapat memiliki kepercayaan pengunjung di situs kita. Jika Anda memperhatikan interaksi dengan sistem operasi Anda, ada banyak animasi halus. Hal-hal memudar masuk atau keluar, berpindah ke dan dari bilah tugas dan menghadirkan polesan yang membantu Anda memahami komputer

Saat kami mendesain situs web, kami sering melupakan ini, dan malah menciptakan pengalaman yang terasa datar. Animasi dapat membuat interaksi situs Anda terasa lebih baik

Dalam sebuah posting di Medium. com, Michaël Villar menjelaskan bagaimana proses checkout Stripe menggunakan animasi untuk membantu pengguna baik dalam interaksi mereka dengan alur checkout tetapi juga untuk menanamkan kepercayaan

"Sensasi bernuansa animasi over-the-top ini menambah pengalaman pengguna secara keseluruhan, menyampaikan tingkat kesempurnaan dan perhatian terhadap detail yang tidak bisa tidak Anda percayai"

Dengan gaya yang tepat, animasi dapat membuat pengguna merasa seperti menggunakan UI yang modern dan terpoles

Merek dan kesenangan

Ketika Yahoo. melalui rebranding besar-besaran pada tahun 2013, mereka menambahkan animasi halus ke setiap logo situs web mereka. Dimaksudkan untuk menyampaikan rasa senang, mereka dibuat untuk menarik perhatian pada perubahan dan membuat orang membicarakannya

Situs ini tampaknya tidak memilikinya lagi, tetapi Anda dapat menemukan contoh animasi di situs web Astronaut Love

Ketika Stripe menggunakan animasi, mereka melakukannya dengan tingkat polesan yang diasosiasikan oleh orang (dan pengembang mempertimbangkan untuk menggunakan layanan mereka) dengan nama mereka. Dalam kedua kasus tersebut, animasi membantu menarik perhatian dan meningkatkan merek mereka

Animasi juga bisa menyenangkan. Di Hop. yaitu, saya membuat karakter "bouncer" yang akan memantul dari kiri menjadi logo. Sambil menjaga desain situs sangat sederhana, penjaga ini bertindak sebagai jangkar yang menautkan kembali ke halaman beranda. Tidak perlu animasi, tapi menurut saya menambahkan sedikit nada. Tidak ada yang salah dengan bersenang-senang

Kekuatan besar, tanggung jawab besar

Animasi adalah alat yang ampuh. Sama seperti bagaimana kita merasa mudah untuk menatap api yang menyala, kita menemukan animasi yang berkedip sulit untuk diabaikan. Beberapa orang bahkan merasa tidak mungkin untuk mengabaikannya

Saat mempertimbangkan bagaimana Anda menggunakan animasi dalam desain Anda, ingatlah bahwa itu adalah alat komunikasi. Itu harus digunakan dengan hemat dan tidak pernah menghalangi konten atau interaksi

Tidak menyenangkan mencoba mendengarkan banyak orang berbicara sekaligus, atau mencoba fokus di lingkungan yang sibuk. Terlalu banyak animasi menciptakan gangguan visual yang mengalihkan perhatian dan membuat hidup lebih sulit bagi pengunjung Anda. Dengan mengingat hal itu, selalu berusaha untuk mengurangi penggunaan animasi dan menjaganya tetap halus

Mengapa animasi sekarang?

Tidak pernah ada waktu yang lebih baik untuk menghadirkan animasi ke dalam proses desain web Anda. Browser menjadi lebih baik, perangkat menjadi lebih kuat, dan kami mendapatkan alat yang lebih baik untuk membantu membuat animasi

Menggunakan animasi membawa penilaian. Jika Anda ingin menjadi hebat dalam menggunakan animasi untuk membantu konten Anda menonjol, meningkatkan konversi, atau secara umum meningkatkan merek Anda, sekaranglah waktunya untuk memulai