Tutorial Animasi CSS: Panduan Lengkap untuk Pemula

Ini adalah panduan sintaks lengkap dan tutorial animasi CSS interaktif untuk pemula. Gunakan sebagai referensi untuk mempelajari berbagai bagian dari spesifikasi animasi CSS.

Kinerja browser telah berkembang pesat dalam 10 tahun terakhir. Dulu jauh lebih menantang untuk menambahkan animasi interaktif ke halaman web karena potensi masalah rendering dan kinerja. Namun saat ini, animasi CSS dapat digunakan dengan lebih bebas dan sintaks umumnya lebih mudah dipelajari dibandingkan dengan fitur CSS seperti grid atau flexbox.

Ada beberapa fitur berbeda yang merupakan bagian dari spesifikasi animasi CSS W3C. Beberapa lebih mudah digunakan daripada yang lain. Tutorial animasi keyframe CSS ini akan membahas semua sintaks, termasuk masing-masing properti yang berbeda. Saya akan menyertakan demo interaktif untuk membantu Anda memahami apa yang mungkin dengan animasi CSS.

Sintaks @keyframes

Setiap animasi CSS memiliki dua bagian: Satu atau lebih animation-* properti bersama dengan satu set bingkai utama animasi yang ditentukan menggunakan @keyframes at-rule. Mari kita lihat secara detail apa yang diperlukan untuk membangun set aturan @keyframes .

Sintaksnya terlihat seperti ini:

 @keyframes moveObject 0% transform: translateX(0); 50% transform: translateX(300px); 100% transform: translateX(300px) scale(1.5);

Seperti yang ditunjukkan di sini, @keyframes at-rule mencakup tiga bagian dasar:

• Aturan @keyframes diikuti dengan nama animasi khusus
• Satu set kurung kurawal yang membungkus semua bingkai utama
• Satu atau lebih bingkai utama, masing-masing dengan persentase diikuti oleh seperangkat aturan yang dikelilingi oleh kurung kurawal

Dalam contoh pertama tutorial animasi CSS ini, saya telah mendefinisikan animasi saya dengan nama moveObject . Ini bisa berupa nama apa pun yang saya inginkan, peka huruf besar/kecil, dan harus mematuhi aturan pengidentifikasi khusus di CSS. Nama kustom ini harus cocok dengan nama yang digunakan dalam properti animation-name (dibahas nanti).

Dalam contoh saya, Anda akan melihat saya menggunakan persentase untuk menentukan setiap bingkai utama dalam animasi saya. Jika animasi saya menyertakan bingkai utama yang sama dengan 0% dan 100% , saya dapat menggunakan kata kunci from dan to sebagai alternatif:

 @keyframes moveObject from transform: translateX(0); 50% transform: translateX(300px); to transform: translateX(300px) scale(1.5);

CodePen interaktif berikut menggunakan sintaks di atas dalam contoh langsung:

Dalam demo, saya telah menyertakan tombol yang mengatur ulang animasi. Saya akan menjelaskan nanti mengapa ini diperlukan. Namun untuk saat ini, ketahuilah bahwa animasi ini menyertakan tiga bingkai utama yang mewakili langkah-langkah dalam urutan animasi ini: awal, langkah 50%, dan akhir (yaitu, 0%, 50%, dan 100%). Masing-masing menggunakan apa yang disebut pemilih keyframe bersama dengan kurung kurawal untuk menentukan properti pada langkah itu.

Beberapa hal yang perlu diperhatikan tentang sintaks @keyframes :

• Anda dapat menempatkan kumpulan aturan keyframe dalam urutan apa pun yang Anda inginkan, dan browser akan tetap menjalankannya dalam urutan yang ditentukan oleh persentasenya
• Anda dapat menghilangkan keyframe 0% dan 100% dan browser akan secara otomatis menentukannya dengan gaya yang ada pada elemen yang sedang dianimasikan
• Jika ada keyframe duplikat dengan kumpulan aturan yang berbeda (misalnya, dua keyframe untuk 20% dengan nilai transformasi yang berbeda), browser menggunakan yang terakhir
• Anda dapat menentukan beberapa bingkai utama dalam satu pemilih bingkai utama dengan koma: 10%, 30% ...
• Kata kunci !important membatalkan nilai properti apa pun sehingga tidak boleh digunakan pada properti di dalam kumpulan aturan keyframe

Sekarang setelah Anda memiliki pemahaman yang baik tentang sintaks @keyframes dalam tutorial animasi CSS ini, mari kita lihat berbagai properti animasi yang didefinisikan pada elemen yang sedang dianimasikan.

Properti animasi yang akan kita bahas:

Properti nama-animasi

Seperti yang disebutkan, setiap animasi CSS yang Anda buat harus memiliki nama yang muncul di sintaks @keyframes . Nama ini harus sama dengan nama yang ditentukan menggunakan properti animation-name .

Menggunakan CSS dari demo sebelumnya, sintaksnya terlihat seperti ini:

 .box animation-name: moveObject;

Sekali lagi, nama kustom yang telah saya definisikan juga harus ada sebagai nama untuk @keyframes at-rule — jika tidak, nama ini tidak akan menghasilkan apa-apa. Anda dapat menganggap ini seperti panggilan fungsi dalam JavaScript. Fungsi itu sendiri akan menjadi bagian @keyframes moveObject dari kode, sedangkan panggilan fungsi adalah animation-name: moveObject .

Beberapa hal yang perlu diingat tentang animation-name :

• Nilai awal untuk animation-name adalah none , yang berarti tidak ada keyframe yang aktif. Ini dapat digunakan sebagai semacam 'beralih' untuk menonaktifkan animasi.
• Nama yang Anda pilih peka terhadap huruf besar-kecil dan dapat menyertakan huruf, angka, garis bawah, dan tanda hubung.
• Karakter pertama dalam nama harus berupa huruf atau tanda hubung, tetapi hanya satu tanda hubung.
• Nama tidak boleh berupa kata khusus seperti unset , initial , atau inherit .

Properti durasi animasi

Properti animation-duration , tidak mengherankan, menentukan jumlah waktu yang dibutuhkan animasi untuk berjalan sekali dari awal hingga akhir. Nilai ini dapat ditentukan dalam detik atau milidetik, seperti yang ditunjukkan di bawah ini:

 .box animation-duration: 2s;

Di atas akan setara dengan yang berikut:

 .box animation-duration: 2000ms;

Anda dapat melihat properti animation-duration beraksi di demo CodePen berikut. Dalam demo ini, Anda dapat memilih berapa lama Anda ingin animasi bertahan. Coba masukkan berbagai nilai dalam detik atau milidetik, lalu gunakan tombol “Animate the Box” untuk menjalankan animasi.

Jika Anda menggunakan angka kecil bersama dengan ms untuk unit, Anda mungkin tidak akan melihat pergerakan apa pun. Coba atur angka yang lebih tinggi jika Anda menggunakan milidetik.

Beberapa catatan tentang penggunaan animation-duration :

• Nilai negatif tidak valid
• Unit harus disertakan, meskipun durasi diatur ke 0s (nilai awal)
• Anda dapat menggunakan nilai pecahan (misalnya, 0.8s )

Properti fungsi waktu animasi

Fungsi animation-timing-function , yang maknanya tidak sejelas dua properti sebelumnya, digunakan untuk menentukan cara kemajuan animasi CSS. Itu mungkin bukan penjelasan yang paling jelas, tetapi sintaksnya mungkin membantu memperjelas.

Deklarasi terlihat seperti ini:

 .box animation-timing-function: linear;

Properti ini menerima nilai kata kunci berikut:

• ease (nilai awal)
• ease-in
• ease-out
• ease-in-out
• linear
• step-start
• step-end

Sebagian besar nilai relatif mudah dipahami berdasarkan namanya, tetapi Anda dapat melihat perbedaannya dengan menggunakan demo interaktif berikut:

Gunakan input pilih untuk memilih salah satu dari tujuh nilai kata kunci. Perhatikan bahwa kemudahan- ease-* nilai 'kemudahan' animasi dalam berbagai cara. Nilai linier konsisten sepanjang jalan.

Properti animation-timing-function juga menerima fungsi berikut:

• cubic-bezier() – Menerima sebagai argumen empat nilai angka, dipisahkan dengan koma
• steps() – Menerima dua nilai sebagai argumen, angka dan “istilah lompat”, dipisahkan dengan koma

Nilai kata kunci step-start dan step-end sama dengan nilai steps(1, jump-start) dan steps(1, jump-end) .

Sedangkan untuk cubic-bezier() , demo interaktif berikut mungkin membantu Anda memahami fungsinya sedikit lebih baik:

Perhatikan demo memungkinkan Anda mengatur empat argumen dalam fungsi cubic-bezier() . Dua argumen bisa negatif, dan dua dibatasi ke nilai desimal antara 0 dan 1. Untuk penjelasan yang layak tentang cara kerja jenis fungsi pengaturan waktu ini, Anda dapat melihat artikel ini atau alat interaktif ini.

Fungsi steps() , di sisi lain, menerima dua argumen:

• Bilangan bulat yang mewakili "perhentian" yang sama di sepanjang satu siklus animasi.
• Kata kunci opsional yang disebut "jumpterm" yang menentukan apakah animasi "bertahan" pada interval tertentu

Sekali lagi, demo interaktif akan membantu Anda memahami cara kerja jumpterm ini:

Coba pilih integer bersama dengan jumpterm (atau coba tanpa jumpterm) untuk melihat perbedaan kata kunci dengan nilai integer yang berbeda. Rupanya bilangan bulat negatif diizinkan tetapi saya tidak melihat perbedaan antara 0 dan nilai negatif apa pun.

Properti animasi-iterasi-hitung

Dalam beberapa kasus, Anda akan senang jika animasi berjalan sekali, tetapi terkadang Anda ingin animasi dijalankan beberapa kali. Properti animation-iteration-count memungkinkan Anda melakukan ini dengan menerima angka positif yang menunjukkan berapa kali Anda ingin animasi dijalankan:

 .box animation-iteration-count: 3;

Nilai awal untuk animation-iteration-count adalah 1 tetapi Anda juga dapat menggunakan kata kunci infinite (cukup jelas) atau menggunakan nilai pecahan. Nilai pecahan akan menjalankan sebagian animasi pada proses pecahan:

 .box animation-iteration-count: 3.5;

Kode di atas berjalan melalui animasi tiga setengah kali. Artinya, tiga iterasi penuh diikuti oleh satu iterasi terakhir yang berhenti tepat di tengah jalan.

Properti ini paling berguna bila digunakan bersama dengan properti animation-direction (dibahas selanjutnya), karena animasi yang berjalan dari awal saja tidak terlalu berguna jika dijalankan lebih dari sekali.

Anda dapat mencoba demo di bawah ini yang memungkinkan Anda memilih nilai pecahan untuk jumlah iterasi, sehingga Anda dapat melihat efeknya:

Properti arah animasi

Seperti disebutkan di atas dalam tutorial animasi CSS ini, properti animation-direction bekerja dengan baik bersama dengan animation-iteration-count . Properti animation-direction memungkinkan Anda menentukan arah mana yang Anda inginkan untuk memutar animasi. Sintaksnya terlihat seperti ini:

 .box animation-direction: alternate;

Anda dapat menetapkan nilai sebagai salah satu dari empat kata kunci:

• normal – Animasi diputar ke depan pada iterasi pertama (default)
• reverse – Animasi diputar mundur pada iterasi pertama
• alternate – Animasi diputar ke depan pada iterasi pertama kemudian bergantian pada iterasi berikutnya
• alternate-reverse – Sama seperti alternate tetapi diputar mundur pada iterasi pertama

Anda dapat mencoba nilai yang berbeda dengan jumlah iterasi yang berbeda menggunakan demo interaktif di bawah ini:

Properti animasi-play-state

Properti animation-play-state tidak terlalu berguna dalam lingkungan CSS statis tetapi mungkin berguna saat menulis animasi yang interaktif melalui JavaScript atau bahkan CSS.

Properti ini menerima dua nilai: running atau paused :

 .box animation-direction: paused;

Secara default, setiap animasi yang diberikan berada dalam status "berjalan". Tetapi Anda dapat menggunakan JavaScript untuk mengubah nilai properti. Anda bahkan dapat menggunakan fitur CSS interaktif seperti :hover atau :focus untuk mengubah animasi ke status "dijeda", yang pada dasarnya membekukan animasi di mana pun ia berada dalam iterasi saat ini.

Demo interaktif di bawah ini memiliki animasi yang berjalan tanpa batas dengan dua tombol untuk "jeda" dan "melanjutkan" animasi.

Properti penundaan animasi

Beberapa animasi dirancang untuk segera mulai dianimasikan, sedangkan yang lain dapat mengambil manfaat dari sedikit penundaan sebelum iterasi pertama. Properti animation-delay memungkinkan Anda untuk mencapai ini.

 .box animation-delay: 4s;

Seperti nilai berbasis waktu lainnya, Anda dapat menyetel animation-delay ke nilai menggunakan detik atau milidetik. Anda juga dapat menggunakan nilai pecahan.

Penting untuk dicatat bahwa penundaan hanya terjadi pada iterasi pertama, bukan setiap iterasi. Anda dapat mencoba ini menggunakan demo interaktif di bawah ini:

Demo memberi Anda opsi untuk mengubah nilai iterasi serta penundaan, sehingga Anda dapat melihat bahwa penundaan tidak memengaruhi iterasi berikutnya – hanya yang pertama.

Cara yang menarik untuk menggunakan properti ini adalah dengan nilai negatif. Misalnya, menggunakan demo di atas, coba atur animation-delay ke -0.5s . Anda akan melihat penundaan negatif bekerja hampir seperti maju dalam mesin waktu - animasi dimulai sebagian daripada di awal.

Properti mode isi-animasi

Properti tulisan tangan terakhir yang akan saya bahas dalam tutorial animasi CSS ini adalah yang saya gunakan di demo sebelumnya. Anda akan melihat bahwa ketika animasi menghentikan iterasi terakhir, kotak tetap di tempatnya. Ini dilakukan dengan menggunakan animation-fill-mode .

 .box animation-fill-mode: forwards;

Properti ini menetapkan bagaimana animasi menerapkan gaya ke elemen yang ditargetkan sebelum dan sesudah eksekusinya. Itu agak sulit untuk dipahami secara konseptual, jadi saya akan membahas arti dari setiap nilai; kemudian Anda dapat membandingkan nilainya menggunakan demo interaktif.

Properti ini menerima empat nilai kata kunci berikut:

• none – Default, tidak ada gaya yang diterapkan sebelum atau sesudah eksekusi
• forwards – Mempertahankan semua gaya yang diterapkan di bingkai utama terakhir animasi
• backwards – Kurang lebih kebalikan dari nilai sebelumnya, ia mempertahankan gaya yang diterapkan ke animasi segera setelah memulai eksekusi tetapi sebelum animasi dimulai
• both – Mempertahankan gaya untuk forwards dan backwards

Demo terakhir dalam tutorial animasi CSS ini akan membuat segalanya sedikit lebih jelas, tetapi yang ini mungkin membutuhkan banyak waktu untuk bermain-main sebelum Anda benar-benar mendapatkan apa yang dilakukannya dan bagaimana mencapainya.

Untuk kenyamanan, saya telah menambahkan semua demo ke dalam satu Koleksi CodePen.

Anda akan melihat bahwa demo memungkinkan Anda menyesuaikan mode pengisian, penundaan, arah, dan jumlah iterasi, karena semua ini dapat memengaruhi tampilan. Saya juga telah menambahkan warna latar belakang yang berbeda ke kotak animasi di bingkai utama pertama, yang sekali lagi membantu membuat nilai mode pengisian sedikit lebih jelas. Jika Anda masih belum memahami cara kerja animation-fill-mode , Anda dapat membaca artikel lama yang saya tulis yang membahas animation-fill-mode secara mendalam.

Properti singkatan animasi

Saya telah membahas delapan properti berbeda dalam tutorial animasi CSS untuk pemula ini dan saya mendorong Anda untuk menggunakan jarum panjang. Ini akan memudahkan Anda untuk melihat set nilai eksplisit.

Setelah Anda memiliki pemahaman yang baik tentang masing-masing properti, Anda memiliki opsi untuk menggunakan properti singkatan animation , yang memungkinkan Anda mendefinisikan semua properti tulisan tangan dalam satu deklarasi.

 .box animation: moveObject 2s ease-in-out 3 reverse running 1.3s forwards;

Sejujurnya, itu banyak informasi dalam satu baris. Saya akan merekomendasikan menggunakan singkatan jika deklarasi tidak menyertakan semua properti, tetapi mungkin hanya tiga atau empat di antaranya.

Jika Anda menggunakan steno, Anda dapat menempatkan nilai dalam urutan apa pun yang Anda inginkan, tetapi perhatikan aturan berikut:

• Nilai pertama yang mendefinisikan waktu adalah animation-duration ; setiap nilai waktu berikutnya adalah animation-delay .
• Jika ada konflik antara kata kunci dan animation-name , nilai kata kunci akan didahulukan jika muncul lebih dulu.
• Nilai apa pun yang dihilangkan akan kembali ke keadaan awalnya, seperti halnya properti singkatan CSS apa pun.

Menerapkan beberapa animasi ke satu elemen

Satu fitur terakhir yang baik untuk diperhatikan adalah Anda memiliki opsi untuk menerapkan beberapa animasi ke satu objek dengan memisahkan animasi dengan koma.

Berikut ini contoh menggunakan singkatan:

 .box animation: moveObject 2s ease-in-out, fadeBox 3s linear;

Di sini, saya telah mendefinisikan dua animasi berbeda yang akan dipetakan ke dua set bingkai utama yang berbeda, tetapi akan diterapkan pada objek yang sama. Kode yang sama dapat ditulis dengan tulisan tangan sebagai:

 .box animation-name: moveObject, fadeBox; animation-duation: 2s, 3s; animation-timing-function: ease-in-out, linear;

Perhatikan bagaimana setiap properti menyertakan dua nilai yang dipisahkan dengan koma. Dalam hal ini, steno hampir pasti akan lebih mudah dibaca dan dipelihara.

Mengakhiri tutorial animasi CSS ini

Satu peringatan terakhir: Gunakan animasi secukupnya dan ingat bahwa beberapa pengguna web mungkin terpengaruh secara negatif oleh warna yang berkedip dan objek yang bergerak cepat lainnya.