Power up menu Anda menggunakan animasi dengan CSS

Sep 14, 2025

Bagaimana caranya

Ini melalui animasi yang kami tingkatkan di dunia: Pintu berayun terbuka, mobil berkendara ke tujuan mereka, bibir meringkuk menjadi senyum. Bahkan hal-hal yang terasa instan, seperti kilat mencolok atau menjatuhkan telepon di wajah Anda saat menggunakannya di tempat tidur, terjadi seiring waktu. Itu melalui gerakan yang kita pahami bagaimana objek berhubungan dan berfungsi; Jika mereka ringan atau berat, kaku atau longgar, terhubung atau terpisah, lengket atau licin.

Namun, di web, kita sudah terbiasa dengan hal-hal yang muncul dan menghilang dalam sekejap mata. Kami mengklik tautan dan semuanya berubah. Ini seperti dituntun ke dalam ruangan yang ditutup matanya, berputar-putar beberapa kali, dan melepas penutup mata untuk mengambil di sekitarnya. Anda bahkan tidak tahu pintu mana yang Anda lakukan. Ini oleh dan besar bagaimana sebagian besar situs dibangun. Kita bisa berbuat lebih baik.

Saat belajar tentang potensi Animasi css. , Mungkin mudah untuk membiarkan imajinasi kita masuk ke hyperdrive dan menaburkan animasi pada hampir semuanya. Sementara animasi bisa bagus, kita harus berhati-hati dan selalu bertanya pada diri sendiri: apakah animasi ini bermakna? Apakah menambahkan nilai apa pun selain menjadi cantik? Apakah membuat produk kami lebih mudah digunakan?

Animasi yang bermakna

This is the starting point for the tutorial – the sample menu that we’ll reveal with an animation — Ini adalah titik awal untuk tutorial - menu sampel yang akan kami ungkapkan dengan animasi

Dalam artikel ini kita akan bekerja dengan umum UI Design. Elemen: Menu toggle. Kami akan membuat menu (dan ikon untuk pergi dengan itu) dengan CSS, dan membuatnya menjadi hidup dengan animasi. Kami akan memastikan bahwa animasi bermakna, tetapi juga menerapkan praktik terbaik kinerja web untuk memastikan mereka sehalus mungkin.

Kamu bisa pratinjau hasil akhir di sini . Ketika pengguna mengklik ikon menu kami akan memperluas plat latar belakang ikon (lingkaran) untuk menutupi layar, dan menyajikan overlay menu.

Daripada hanya flash ke ikon yang dekat, kita akan menghidupkan dan mengubah tiga garis vertikal (yang membentuk ikon menu) menjadi 'X', untuk mewakili ikon tutup. Dengan kata lain, karena menu terungkap icon morphs menjadi tombol Tutup.

Elemen terkait.

Anda mungkin berpikir 'Jadi, apakah ini animasi yang bermakna?' Nah, pertanyaan bagus. Jawaban singkat: Ya! Jawaban yang lebih lama: Animasi sangat bagus di elemen penghubung di layar, dan menunjukkan bagaimana mereka berhubungan satu sama lain.

Ketika kami meningkatkan plat latar belakang menu untuk menjadi menu, kami menunjukkan bagaimana keduanya terhubung - mirip dengan bagaimana ikon aplikasi, ketika ditekan pada iOS atau Android, timbangan dan mengambil alih layar, menunjukkan bahwa aplikasi diluncurkan dari ikon itu. Ikon menu kami tidak hanya beralih menu: Ini adalah menu, hanya runtuh.

Demikian pula, sama seperti cara beralih / mati bertransformasi antara keadaan hidup dan mati ketika Anda menekannya pada iOS, menu toggle kami akan berubah antara ikon menu dan ikon dekat tergantung pada apakah menu situs kami terlihat atau disembunyikan. Ini membantu menegakkan gagasan bahwa dua ikon berfungsi dengan cara yang sama: mereka berdua mengendalikan menu.

Jadi sementara kami membuat situs kami menyenangkan untuk digunakan, kami juga membuatnya lebih mudah untuk memahami, dan meningkatkan pengalaman pengguna Begitu sedikit.

Lihat bagaimana melakukan ini dalam tutorial video di atas dan langkah-langkah tertulis di bawah ini.

01. Mulai

By drawing the menu icon with CSS (and no images), we can easily animate it later — Dengan menggambar ikon menu dengan CSS (dan tidak ada gambar), kita dapat dengan mudah menghidupkannya nanti

Unduh file proyek . Buka index.html Di browser dan Anda akan melihat tiga tautan besar dengan latar belakang putih. Ini adalah overlay menu yang kami ungkapkan.

Pertama-tama kita perlu menyembunyikannya. Di styles.css. , tambahkan gaya ini ke .menu-overlay :

 Opacity: 0;
Visibilitas: Tersembunyi;

Dengan overlay hilang, tombol akan muncul di sudut kiri atas. Mari kita gambar ikon menu kami di sini, jadi ada sesuatu untuk diklik untuk menunjukkan overlay. Untuk membuatnya mudah untuk menghidupkan, kami akan menggambarnya hanya menggunakan HTML dan CSS; Tidak ada bitmap atau vektor. Kami sudah punya beberapa html index.html Untuk menu: wadah ( .Tidak bisa ), A. Latar Belakang ( .menu-Circle. ), sebuah link ( .menu-link ) dan ikon ( .menu-icon. ) Dengan satu rentang untuk setiap baris.

Memiliki yang terpisah jaman Untuk latar belakang adalah pendekatan yang agak tidak konvensional. Jika kami tidak akan menambahkan animasi ke lingkaran ini, kami tidak perlu terpisah jaman ; kita bisa menambahkan BORDER-RADIUS. dan warna latar belakang untuk kami menu-link .

Namun, kami ingin bebas menggunakan mengubah Properti di lingkaran, jadi kita dapat menskalanya tanpa mempengaruhi ikon itu sendiri, jadi kita perlu memisahkan latar belakang dari ikon.

Mari kita mulai menggambar garis yang membentuk ikon. Apa kesamaan mereka? Mereka sama-sama lebar, mereka memiliki sudut bulat, benar-benar diposisikan, dan mereka memiliki warna latar belakang. Karena semua garis berbagi menu-line. kelas, mari kita gunakan untuk mengatur properti bersama ini:

 .menu-line {
 Latar Belakang - Warna: # 333;
 Tinggi: 2px;
 Lebar: 100%;
 Radius Border: 2px;
 Posisi: absolut;
 Kiri: 0;
}

Maka kita dapat menggunakan kelas unik garis untuk mengatur posisi vertikal:

 .menu-line-1 {top: 0; }

.menu-line-2 {
 TOP: 0;
 Bawah: 0;
 MARGIN: AUTO;
}

.menu-line-3 {bottom: 0; }

02. Tambahkan efek hover

To make the menu appear clickable, we inflate the background plate on hover — Untuk membuat menu tampak dapat diklik, kami mengembang piring latar belakang di hover

Mari kita buat ikon dengan jelas dapat diklik dengan menambahkan efek hover. Di styles.css. , buat pemilih baru untuk menu-lingkaran Untuk meningkatkannya ketika Anda melayang di atas menu:

 .menu: hover .menu-circle {Transform: Scale (1.4); }

Sekarang kita dapat menambahkan animasi pertama kami. Menambahkan "Transisi: Semua 0.2S Mudah-Keluar" untuk .menu-circle {} (BUKAN KE NEGARA HOVER). Kami memberi tahu browser untuk menghidupkan semua properti yang dapat berubah .menu-Circle. . Jadi ketika kita meningkatkannya melayang, itu menghidupkan selama 0,2 detik ke keadaan barunya, dengan fungsi waktu kemudahan .

Bagaimana Anda tahu fungsi waktu mana yang harus dipilih? Pertama-tama, hindari menggunakan fungsi waktu linier. Beberapa hal di dunia nyata bergerak dengan kecepatan yang sangat konstan, sehingga objek yang dianimasikan dengan fungsi waktu linier cenderung terlihat tidak alami dan kaku (seperti yang dikatakan Einstein, "Tuhan tidak bermain dadu dengan fungsi timing linear").

Sebagai aturan praktis, Kemudahan bekerja dengan baik untuk menyajikan objek baru, dan Mudah Bekerja bagus untuk menghapus objek. Dan ketika ragu, kemudahan adalah fungsi waktu yang solid untuk default ke: ia memiliki awal yang lambat dan akhir yang lambat, menciptakan animasi yang halus dan fluida.

03. Tampilkan dan sembunyikan menu

Mari kita gunakan jQuery untuk menampilkan dan menyembunyikan overlay kami yang baru dibuat. Di Script.js. , beralih kelas Buka di .menu-overlay Di dalam handler klik yang ada:


    $ (". Menu-overlay"). Toggleclass ("Open");

Kemudian tunjukkan overlay ketika memiliki kelas terbuka:

 .menu-overlay.open {
 Opacity: 1;
 Visibilitas: Terlihat;
}

04. Hubungkan ikon menu

Transisi yang kami tambahkan sebelumnya berarti kami sudah memiliki efek fade yang rapi saat kami menunjukkan dan menyembunyikan overlay. Namun, kita bisa membuatnya terlihat seperti latar belakang ikon menu menjadi overlay menu, dan lebih baik menghubungkan dua secara visual.

Mencapai efek ini lebih mudah daripada kelihatannya: yang perlu kita lakukan adalah dengan cepat memperbesar lingkaran menu saat diklik. Overlay akan memudar secara bersamaan, menciptakan ilusi bahwa ikon menu berubah menjadi overlay.

Kita harus dapat menata lingkaran menu ketika menu telah diklik. Buka Script.js. , dan di dalam fungsi klik kami yang ada. Beralih kelas terbuka untuk kami .Tidak bisa :


  $ (". menu"). Toggleclass ("Open");

Sekarang kita dapat menargetkan kelas ini dengan CSS dan memperluas lingkaran saat menu dibuka. Di bagian paling bawah gaya.css. , perluas .menu-Circle. kapan .Tidak bisa juga memiliki kelas .Buka :

 .menu.open .menu-circle {transform: skala (60);
}

05. Ubah ikon

The white circle expands to become the menu background, and the icon morphs into an 'X' — Lingkaran putih mengembang untuk menjadi latar belakang menu, dan icon berubah menjadi 'X'

Kami punya efek pengungkapan yang indah untuk menu kami, tetapi bagaimana kami mengubah ikon menu menjadi ikon dekat? Sangat mudah sekali setelah Anda tahu caranya - kami hanya perlu mengatur tiga properti CSS. Pertama, kita perlu menyembunyikan garis tengah sementara menu sedang ditampilkan:

 .menu.open .menu-line-2 {opacity: 0; }

Maka yang perlu kita lakukan adalah membalik dua baris lainnya 45 derajat dalam arah yang berlawanan (garis-garis perlu menunjuk ke arah yang berbeda untuk membentuk 'X', jadi perhatikan bagaimana salah satu baris memiliki rotasi negatif 45 derajat):

 .menu.open .menu-line-1 {
 Transformasi: Putar (-45deg);
}

.menu.open .menu-line-3 {
 Transformasi: Putar (45deg);
}

Nah, semacam. Kita juga perlu memusatkan dua baris ini secara vertikal. Pada titik ini Anda bisa berpikir 'Mudah! Kita hanya perlu mengubah puncak dan bawah posisi untuk memusatkan mereka '. Dan Anda akan benar - jika kita tidak menjiwai ikon ini.

Karena kita hanya dapat mencapai animasi yang dipercepat perangkat keras dengan membatasi diri untuk menjiwai mengubah dan kegelapan Properti, kita harus menggunakan untuk memusatkan garis melalui transformasi.

 .menu.open .menu-line-1 {
 Transformasi: Translate (7px) Translate (-50%) Putar (-45deg);
}

.menu.open .menu-line-3 {
 Transformasi: Translate (-7px) Translate (50%) Putar (45deg);
}

Transformasi ini akan memindahkan dua baris sehingga terpusat secara vertikal dalam wadah ikon, dan kemudian memutarnya untuk membentuk salib.

Mari kita hancurkan. Kami memiliki dua terjemahan yang digunakan secara bersamaan: Translate (7px) dan Translate (-50%) . Transformasi pertama, Translate (7px) , digunakan untuk memindahkan tepi atas garis ke tengah vertikal kanvas. Matematika di sini sederhana: 14 adalah ketinggian ikon kita, dengan membaginya dengan dua kita mendapatkan poin tengah: 7.

Transformasi kedua, Translate (-50%) , digunakan untuk memindahkan garis sehingga pusat vertikal garis, bukan tepi atasnya, berada di titik tengah vertikal kanvas.

Biasanya saat menggunakan % Masuk CSS Anda merujuk pada induk elemen (pengaturan Lebar: 100% Cocok dengan lebar elemennya dengan induknya), tetapi jika Anda menggunakan persentase dengan properti Transform, Anda merujuk pada elemen itu sendiri, bukan orangtua. Jadi bagi kita untuk menemukan ketinggian garis dan memindahkannya ke atas setengahnya, yang kita butuhkan adalah Translate (-50%) .

06. MORPH ANTARA IKON

Alih-alih hanya mengganti ikon menu dengan ikon Tutup, mari kita morf di antara kedua negara.

Mulailah dengan menambahkan transisi ke .menu-line. di gaya.css. :

 Transisi: Semua kemudahan 0,25-an;

TA-DA! Ikon menu morphing. Animasi agak membosankan. Mari kita perbaiki itu. Untuk membuat garis tampak lebih jelas, kita dapat memutar keduanya 90 derajat tambahan. Ikon akan terlihat sama pada akhirnya, tetapi garis akan bergerak lebih jauh selama periode waktu yang sama. Ubah rotasi ke Putar (-135deg) dan Putar (135deg) .

Sebagai aturan praktis, Anda selalu dapat meningkatkan animasi dengan menggunakan kurva bézier khusus yang lebih baik diadaptasi dengan animasi Anda. Kami saat ini menggunakan kemudahan - Ini berarti bahwa animasi akan memiliki awal dan akhir yang lambat, dengan kecepatan lebih cepat di tengah.

Saya pikir efek seperti musim semi pas untuk ikon kami. Mari kita membuatnya berputar dengan cepat, dengan efek bouncing kecil saat berakhir. Untuk .menu-line. , ganti " Kemudahan Keluar " dengan kurva bézier khusus:

 Transisi: Semua 0,25s kubik-bezier (0,175, 0,885, 0,32, 1.275);

Apa saja angka-angka itu? Jangan khawatir: kurva bézier jarang ditulis dengan tangan. Kau gunakan kubik-bezier () Untuk mendefinisikan kecepatan animasi dari waktu ke waktu, dan alih-alih menulisnya sendiri, saya sarankan menggunakan situs referensi. Ini berasal dari Easings.net. Ini melampaui pada akhir animasi, dan menciptakan efek bouncing yang halus.

Sementara kita melakukannya, pergi ke Easons.net. dan ambil kode untuk EASOOTEXPO. . Kami akan menggunakan ini untuk membuat efek yang lebih halus untuk animasi latar belakang menu. Perbarui transisi .menu-Circle. Untuk menggunakan kurva bézier khusus ini, dan membuat animasi sedikit lebih lama (0,5s):

 Transisi: Semua 0,5s kubik-bezier (0,19, 1, 0,22, 1);

Selamat, Anda telah membuat satu set animasi yang bermakna: mereka membantu Anda memahami apa yang terjadi di situs sambil menavigasi, menciptakan rasa kesadaran spasial. Selain itu, animasi berjalan dengan lancar.

Dengan hanya menjiwai properti transformasi dan opacity, kita dapat memastikan dukungan akselerasi perangkat keras browser dapat menendang, dan menghindari lag yang tidak perlu. Saat bermain-main dengan animasi, pastikan Anda mencentang dua kotak ini: buat mereka bermakna, dan indah.

Artikel ini awalnya muncul di Net Magazine. Masalah 281. Berlangganan bersih di sini .

Artikel terkait:

10 Contoh Animasi CSS3 yang Mengesankan
28 Contoh Luar Biasa CSS
Mulai dengan aksesibilitas web

Power up menu Anda menggunakan animasi dengan CSS

Animasi yang bermakna

Elemen terkait.

01. Mulai

02. Tambahkan efek hover

03. Tampilkan dan sembunyikan menu

04. Hubungkan ikon menu

05. Ubah ikon

06. MORPH ANTARA IKON

Bagaimana caranya - Artikel Terpopuler

Persiapan dengan Redux Thunk

Belajarlah untuk memodelkan orang 3D di Zbrush dan Maya

Bagaimana cara memindai seseorang dalam waktu kurang dari lima menit

Cara Membuat Adegan Ruang Fotorealistik

Persiapan dengan difus

Master ilmu Pengoptimalan Tingkat Konversi

Cara Membuat Kain CG Realistis

cat adegan epik New York

Kategori