Cara Membuat Penggunaan Animasi CSS3 yang Baik: Tutorial, Kode Contoh, dan Contoh

Artikel ditulis oleh:
  • Desain Website
  • Diperbarui: Agustus 28, 2013

Ketika kami menggunakan JS dan jQuery kami memiliki kontrol penuh atas animasi dan kami dapat membuat beberapa efek yang mengagumkan, tetapi harganya cukup tinggi. Waktu pemrosesan, kompatibilitas lintas-browser (perangkat seluler, misalnya, sangat berbeda ketika menyangkut JS) dan kerumitan kode itu sendiri adalah hal-hal yang harus diingat saat membuat antarmuka animasi.

Jadi, hari ini kita akan melihat bagaimana menghindari JS dengan menggunakan Animasi dan Transisi CSS. Kita akan membahas dari langkah-langkah dasar hingga efek hebat, seperti panel akordion dan sub-menu animasi.

Ambil tempat duduk, Anda notepad dan browser nyata (apa pun kecuali IE) dan mari kita mulai.

Pemanasan

Kami memiliki cukup banyak keuntungan (dan kerugian sebagai segalanya dalam hidup kami) dalam menggunakan animasi CSS. Jika Anda perlu menjualnya kepada atasan atau klien Anda, inilah yang harus Anda ingat:

  • Mereka berpotensi lebih cepat, karena mereka dapat menggunakan akselerasi perangkat keras (sebagai implementasi HTML5)
  • Mereka akan berkinerja lebih baik di perangkat seluler dan tidak perlu kode khusus untuk melacak acara sentuh
  • JS perlu ditafsirkan oleh browser dan kemungkinan untuk mematahkan peramban jauh lebih besar. Jadi ketika CSS gagal, gagal secara diam-diam sementara JS dapat merusak seluruh halaman
  • Mereka memiliki dukungan browser yang cukup baik (situs ini akan membantu Anda memeriksa statistik khusus untuk itu: http://caniuse.com/#search )

Contoh Animasi CSS3

Sebelum kita mulai pada daging posting ini, mari kita lihat beberapa animasi indah yang dibuat dengan CSS murni.

Pure CSS Twitter Fail Whale

Paus Gagal Animasi

Dibuat oleh Steven Dennis, lihat ini dalam aksi.

Pure CSS Scrolling Coke Can
Contoh Animasi 3 CSS: Menggulir Coke Can

Dibuat oleh Roman Cortes, lihat ini dalam aksi.

Pure CSS Walking Man

Contoh Animasi 3 CSS: The Walking Man

Dibuat oleh Andrew Hoyer, lihat ini dalam aksi.

Membuat Tangan Anda Kotor

Mari kita mulai kodenya. Kami akan menggunakan banyak kelas pseudo CSS untuk memicu animasi. Sejujurnya, banyak pengembang menyarankan Anda menggunakan JS untuk mengaktifkan dan menonaktifkan animasi, tetapi di sini kita akan melihat cara yang lebih mudah:

#test {background: red; } #test: hover {background: green; } #test: active {background: blue; } #test: target {background: black; }

Kami memiliki beberapa kelas pseudo lain untuk digunakan, tetapi Anda punya ide! Jadi inilah yang terjadi jika Anda mengklik elemen #test (dengan asumsi tautan):

  • Keadaan normal: Latar belakang akan menjadi merah
  • Hover: Ketika mouse memasuki area elemen itu akan memiliki latar belakang hijau
  • Aktif: Ketika Anda mengklik kursor di atasnya dan ketika tombol mouse masih ditekan warna latar belakang akan menjadi biru
  • Target: Ketika halaman saat ini memiliki #test di URL, elemen ini akan menjadi hitam

Masing-masing ini dapat digunakan untuk animasi CSS, misalnya Anda dapat membuat tautan 2 untuk mengaktifkan dan menonaktifkan pembuatan animasi CSS dari elemen pseudo target dengan kode ini:

<a href='#test'> aktifkan </a> <a href='#'> nonaktifkan </a>

Transisi CSS

Transisi CSS akan berubah dari awal ke kondisi akhir dengan lancar. Jadi Anda akan menentukan di pemilih utama menggunakan "transisi" properti waktu dan setiap properti yang akan terpengaruh dan bagaimana animasi seharusnya. Mari kita lihat contohnya:

.test {/ * masa-fungsi durasi fungsi-properti, * / warna: biru; transisi: 2 warna, 2s ukuran font yang mudah hilang; } .test: hover {color: red; } .test: aktif {ukuran font: 200%; }

Saat Anda mengarahkan elemen .test, ia akan mengubah warna secara bertahap dari biru menjadi merah (palet yang bagus, ya?). Ketika Anda mengklik elemen, ukuran font secara bertahap akan meningkat menjadi 200% dari ukuran font default.

Kami juga memiliki properti "waktu transisi", ditetapkan sebagai kemudahan-keluar, bahwa bagaimana "waktu" tersedia untuk animasi akan dihabiskan. Berikut adalah nilai yang mungkin:

  • Linear: Kecepatan yang sama dari awal hingga akhir
  • Kemudahan-masuk: Mulai lambat
  • Mudah dimatikan: Akhir yang lambat
  • Kemudahan: Mulai lambat, cepat di tengah, lalu lambat
  • Kemudahan-keluar: Mulai lambat, akhir lambat
  • Kubik-bezier (a, b, c, d): Kecepatan khusus

Fungsi kubik Bezier akan membuat animasi kustom dengan nomor 4 yang bervariasi dari 0 ke 1, mewakili kurva matematika untuk kecepatan animasi X durasi.

Untuk kompatibilitas browser yang lebih baik Anda harus mempertimbangkan menggunakan awalan vendor untuk opera, Firefox, dan webkit seperti ini:

div {width: 400px; -o-transisi: 2 lebar; -moz-transisi: 2s lebar; -webkit-transition: 2s lebar; transisi: lebar 2s; }

Selain itu, Anda dapat menggunakan kueri media untuk menentukan transisi yang berbeda tergantung pada lebar browser (perangkat seluler, tablet). Ini adalah contoh sederhana:

body {font-size: 1em; } @media layar dan (max-width: 800px) {body {size-font: 0.8em; }} Layar media @ dan (max-width: 400px) {body {Ukuran font: 0.7em; }}

Di sini ukuran font akan berubah tiba-tiba ketika Anda meningkatkan lebar browser. Kode ini akan mencegah hal itu terjadi, memberikan transisi yang lebih halus:

tubuh {-o-transisi: ukuran font .5s linier; -moz-transition: ukuran font .5s linier; -webkit-transition: ukuran font .5s linier; transisi: font-size .5s linier; }

Anda dapat menggunakan ini juga jika Anda memiliki tampilan atau ukuran yang berbeda untuk potret / lanskap, jika Anda ingin mengubah lebar, warna, paddings, tampilan menu.

Animasi CSS - Awal Yang Menyenangkan Sesungguhnya

Animasi adalah urutan transisi yang ditentukan dalam selektor tunggal. Untuk menentukan animasi CSS Anda harus mengikuti langkah 2.

Aturan @keyframe digunakan untuk menentukan urutan langkah-langkah animasi, dan itu didefinisikan oleh nama unik dan gaya yang menggambarkan cara kerja animasi ini. Seperti biasa, kami memerlukan beberapa awalan vendor, seperti dalam contoh ini:

/ * kode yang sama untuk setiap vendor * / @ -o-keyframe my-animation {... @ -moz-keyframe my-animation {... @ -webkit-keyframe my-animation {... / * nama animasi * / @keyframe my-animation {/ * frame selector * / 0% {/ * style frame * / Kiri: 0px; Atas: 0px; } 25% {Kiri: 200px; Atas: 0px; } 50% {Kiri: 200px; Atas: 200px; } 75% {Kiri: 0px; Atas: 200px; } 100% {Kiri: 0px; Atas: 0px; }}

Jadi, setiap gaya didefinisikan oleh frame / kerangka waktu (seperti frame-frame dari animasi flash) sebagai persentase dan gaya yang harus diterapkan di sana. Bingkai utama ini, misalnya mengatakan bahwa elemen akan bergerak ke kiri, lalu atas, lalu ke kanan, lalu ke bawah.

Setelah Anda mengikuti langkah 1 dan membuat bingkai utama Anda, Anda benar-benar dapat menerapkannya ke elemen. Kemudian kita akan menggunakan logika yang sama seperti yang kita lakukan pada transisi CSS, perbedaannya adalah sekarang "transisi" kita adalah animasi yang jauh lebih rumit.

Untuk menerapkannya, kami akan menggunakan properti animasi dan memiliki sub-properti 7:

  • Nama: pengenal unik itu
  • Durasi: Berapa lama dari 0% hingga 100%
  • Timing-function: hampir sama dengan fungsi timing transisi
  • Tunda: Berapa lama waktu yang diperlukan untuk memulai 0%
  • Iterasi-hitungan: Berapa banyak pengulangan yang kita miliki ("tak terbatas" untuk loop tak terbatas)
  • Arah: normal atau bergantian (mundur)
  • Play-state: jika animasi berjalan atau berhenti

Ini akan menerapkan animasi kami ke elemen #test ketika itu adalah target halaman:

#test: target {/ * animation-name | durasi | fungsi waktu | delay | iteration-count | arah | play-state * / animation: my-animation 10s linear 0s berjalan normal tanpa batas; }

Dengan pemikiran ini kita dapat membuat beberapa contoh mengagumkan.

Hanya Akordeon CSS

Kami akan membuat panel yang bisa dilipat menggunakan animasi CSS. Berikut ini struktur HTML dasar:

<div class = "accordion"> <a href="#tab1"> Tab 1 </a> <div id = "tab1"> <p> TEXT 1 </p> </div> <a href = "# tab2 "> Tab 2 </a> <div id =" tab2 "> <p> TEXT 2 </p> </div> <a href="#tab3"> Tab 3 </a> <div id =" tab3 "> <p> TEXT 3 </p> </div> </div>

Ini hanya akan membuat panel dan tautan yang akan memicu masing-masing panel. Dan di sinilah keajaiban terjadi:

/ * setiap div yang ada di dalam akordeon * / .accordion div {/ * disembunyikan secara default * / height: 0; overflow: disembunyikan; / * ilmu hitam * / transisi: tinggi 1s; } / * ketika div yang disebutkan adalah target * / .accordion div: target {/ * height: auto tidak akan berfungsi, tetapi ini akan berfungsi dengan baik * / height: 80px; }

Cukup sederhana, ya? Dan Anda telah menghabiskan seluruh hidup Anda menggunakan JS untuk ini? :)

CSS Hanya Menu dengan Submenu

Dan ini adalah aplikasi lain yang agak sederhana. Anda tentu memiliki menu navigasi di situs Anda, dan seringkali kita perlu menggunakan beberapa submenu di sana. Cara terbaik untuk menampilkan dan menyembunyikan item menggunakan jQuery, bukan? Nah, pikirkan lagi setelah Anda menguji kode ini:

<nav> <ul> <li> <a href='#item1'> Item 1 </a> <div> <ul> <li> <a href='#item11'> Item 1.1 </a> </ li> <li> <a href='#item12'> Item 1.2 </a> </li> </ul></div> </li> <li> <a href='#item2'> Item 2 </a> <div> <ul> <li> <a href='#item21'> Item 2.1 </a> </li> <li> <a href='#item22'> Item 2.2 </a> </li> </ul></div> </li> </ul> </nav>

Dan sihir dimulai di sini:

a {/ * hanya membuat tautan sedikit lebih baik * / display: blok; padding: 4px; } nav {text-align: center; } / * menu apa saja (termasuk yang utama) * / nav ul {display: inline-block; daftar-gaya: tidak ada; } nav> ul> li {/ * item horisontal (vertikal juga akan berfungsi dengan baik) * / float: left; } nav li div {/ * menciutkan sembarang sub-menu * / height: 0; overflow: disembunyikan; / * Perasaan Houdini * / transisi: 1s tinggi; } nav li: hover> div {height: 56px; }

Menyimpulkan Up

Ini tentu saja panduan memulai. Ada banyak efek keren lainnya yang dapat dilakukan hanya dengan menggunakan animasi CSS dan banyak hal yang pasti belum datang.

Jadi, sudahkah kamu menggunakan ini sebelumnya? Dapatkah Anda memikirkan aplikasi lain yang bagus untuk animasi CSS? Bagikan pemikiran Anda menggunakan komentar!

Tentang Rochester Oliveira

Saya seorang desainer web dan pengusaha dari Itajubá (MG), Brasil. Saya suka menulis tentang topik yang tidak jelas dan melakukan beberapa hal keren.