Louis adalah pengembang front-end, penulis, dan penulis yang berbasis di Toronto, Kanada. Dia menyusun buletin Web Tools Weekly dan Tech Productivity dan blog tentang … Selengkapnya tentang Louis ↬ Show
Buletin EmailEmail (menghancurkan) Anda
Kiat mingguan tentang front-end & UX
Sekarang Anda mungkin pernah mendengar setidaknya sesuatu tentang animasi di CSS3 menggunakan sintaks berbasis keyframe. Modul animasi CSS3 dalam spesifikasi telah ada selama beberapa tahun sekarang, dan berpotensi menjadi bagian besar dari desain Web Dengan menggunakan animasi keyframe CSS, pengembang dapat membuat animasi yang halus dan dapat dipelihara yang berkinerja relatif baik dan tidak memerlukan banyak skrip. Ini hanyalah cara lain CSS3 membantu memecahkan masalah dunia nyata dengan cara yang elegan. Jika Anda belum mulai mempelajari sintaks untuk animasi CSS, inilah kesempatan Anda untuk bersiap ketika bagian spesifikasi CSS3 ini melewati tahapan Dalam artikel ini, kami akan membahas semua bagian penting dari sintaksis, dan kami akan memberi tahu Anda tentang dukungan browser sehingga Anda tahu kapan harus mulai menggunakannya Pemandangan Lanskap Animasi Bingkai Kunci CSSLebih banyak setelah melompat. Lanjutkan membaca di bawah ↓ Temui Smashing Workshops di front-end & UX, dengan takeaway praktis, sesi langsung, rekaman video, dan tanya jawab yang ramah. Pada sistem desain, UX, kinerja web, dan CSS/JS. Dengan Brad Frost, Christine Vallaure dan banyak lainnya Lompat ke bengkel ↬Adegan Pemandangan Animasi SederhanaUntuk tujuan artikel ini, saya telah membuat adegan lanskap animasi sederhana untuk memperkenalkan berbagai aspek sintaks. Anda dapat melihat halaman demo untuk mendapatkan gambaran tentang apa yang akan saya jelaskan. Halaman ini menyertakan sidebar yang menampilkan kode CSS yang digunakan untuk berbagai elemen (matahari, bulan, langit, tanah, dan awan). Lihat sekilas, lalu ikuti saat saya menjelaskan berbagai bagian modul animasi CSS3 (CATATAN. Versi Safari sebelum 5. 1 memiliki bug yang mencegah animasi selesai dengan benar. Lihat lebih lanjut di bawah judul "Mode Isi Animasi". ) Saya akan menjelaskan CSS yang terkait hanya dengan salah satu elemen. matahari animasi. Itu sudah cukup untuk memberi Anda pemahaman yang baik tentang animasi berbasis keyframe. Untuk elemen lain dalam demo, Anda dapat memeriksa kode di halaman demo menggunakan tab At-Aturan @keyframesHal tidak biasa pertama yang akan Anda perhatikan tentang kode animasi CSS3 apa pun adalah aturan 2 @. Menurut spesifikasi, aturan @ CSS khusus ini diikuti oleh pengidentifikasi (dipilih oleh pengembang) yang dirujuk di bagian lain dari CSSAturan @ dan pengidentifikasinya kemudian diikuti oleh sejumlah kumpulan aturan (mis. e. aturan gaya dengan blok deklarasi, seperti pada kode CSS normal). Kumpulan aturan ini dibatasi oleh kurung kurawal, yang menyarangkan kumpulan aturan di dalam aturan @, seperti yang akan Anda temukan dengan aturan @ lainnya Inilah aturan @ yang akan kita gunakan _Kata _3 adalah pengidentifikasi pilihan kami yang akan kami gunakan untuk merujuk ke animasi iniPerhatikan bahwa saya tidak menggunakan awalan vendor apa pun untuk semua contoh kode di sini dan di demo. Saya akan membahas dukungan browser di akhir artikel ini, tetapi untuk saat ini baru disadari bahwa saat ini tidak ada browser yang mendukung sintaks standar ini, jadi agar kode berfungsi, Anda harus menyertakan semua awalan vendor Pemilih KeyframeMari tambahkan beberapa set aturan di dalam aturan @
Dengan penambahan kumpulan aturan baru tersebut, kami telah memperkenalkan pemilih keyframe. Dalam contoh kode di atas, pemilih keyframe adalah 4, 5, 6, dan 7. Pemilih 4 dan 7 dapat diganti dengan kata kunci "dari" dan "ke", masing-masing, dan Anda akan mendapatkan hasil yang samaMasing-masing dari empat rangkaian aturan dalam contoh ini mewakili cuplikan elemen animasi yang berbeda, dengan gaya yang menentukan tampilan elemen pada titik tersebut dalam animasi. Poin yang tidak ditentukan (misalnya, dari 34% hingga 65%) terdiri dari periode transisi antara gaya yang ditentukan Meskipun spesifikasinya masih dalam pengembangan, beberapa aturan telah ditentukan yang harus diikuti oleh agen pengguna. Misalnya, urutan bingkai utama tidak terlalu penting. Bingkai kunci akan diputar dalam urutan yang ditentukan oleh nilai persentase, dan tidak harus urutan kemunculannya. Jadi, jika Anda menempatkan keyframe "to" sebelum keyframe "from", animasi akan tetap diputar dengan cara yang sama. Selain itu, jika "ke" atau "dari" (atau padanannya berdasarkan persentase) tidak dideklarasikan, browser akan membuatnya secara otomatis. Jadi, set aturan di dalam aturan @ tidak diatur oleh kaskade yang Anda temukan di set aturan CSS biasa Keyframes Yang Menghidupkan MatahariUntuk tujuan menganimasikan matahari dalam demo ini, saya telah menetapkan empat bingkai utama. Seperti disebutkan, kode di atas menyertakan komentar yang menjelaskan perubahan tersebut Pada keyframe pertama, matahari berwarna merah (seolah-olah baru terbit atau terbenam), dan posisinya di bawah tanah (i. e. tidak terlihat). Secara alami, elemen itu sendiri harus diposisikan secara relatif atau absolut agar nilai 0 dan 1 memiliki efek apa pun. Saya juga menggunakan indeks-z untuk menumpuk elemen (untuk memastikan, misalnya, tanah berada di atas matahari). Perhatikan bahwa satu-satunya gaya yang ditampilkan di bingkai utama adalah gaya yang dianimasikan. Gaya lain (seperti _2 dan 3, yang tidak dianimasikan) dideklarasikan di tempat lain dalam lembar gaya dan karenanya tidak ditampilkan di sini
Sekitar sepertiga dari animasi (33%), matahari berada pada bidang horizontal yang sama tetapi telah terbit dan berubah menjadi kuning-oranye (untuk mewakili siang hari penuh)
Kemudian, sekitar dua pertiga animasi (66%), matahari telah bergerak ke kiri sekitar 300 piksel tetapi tetap berada pada bidang vertikal yang sama. Perhatikan sesuatu yang lain di keyframe 66%. Saya telah mengulangi warna yang sama dari bingkai utama 33%, agar matahari tidak terlalu cepat berubah kembali menjadi merah
Akhirnya, matahari berangsur-angsur bergerak ke keadaan terakhirnya (merah penuh) saat menghilang di bawah tanah
Mengaitkan Nama Animasi Dengan Sebuah ElemenInilah potongan kode berikutnya yang akan kami tambahkan dalam contoh kami. Itu mengaitkan nama animasi (dalam hal ini, kata 3) dengan elemen tertentu dalam HTML kami
Di sini kami memperkenalkan properti 5. Nilai properti ini harus cocok dengan pengidentifikasi dalam aturan 6 yang ada, jika tidak, animasi tidak akan muncul. Dalam beberapa keadaan, Anda dapat menggunakan JavaScript untuk menyetel nilainya ke 7 (satu-satunya kata kunci yang telah dipesan untuk properti ini) untuk mencegah terjadinya animasiObjek yang kami targetkan adalah elemen dengan id 8 dan kelas 9. Alasan saya menggandakan id dan kelas seperti ini adalah agar saya dapat menggunakan skrip untuk menambahkan nama kelas 9. Di demo, saya memulai halaman secara statis; . Ini akan memicu semua animasi pada saat yang sama dan akan memungkinkan animasi dikontrol oleh penggunaTentu saja, itu hanya salah satu cara untuk melakukannya. Seperti halnya apa pun di CSS atau JavaScript, ada cara lain untuk mencapai hal yang sama Durasi Dan Fungsi Pengaturan Waktu AnimasiMari tambahkan dua baris lagi ke CSS kita
Anda dapat menentukan durasi animasi menggunakan properti 2. Durasi mewakili waktu yang dibutuhkan untuk menyelesaikan satu iterasi animasi. Anda dapat menyatakan nilai ini dalam detik (misalnya, 3), milidetik ( 4), dan detik dalam notasi desimal ( 5)Spesifikasi tampaknya tidak menentukan semua unit pengukuran waktu yang tersedia. Namun, tampaknya tidak mungkin ada orang yang membutuhkan waktu lebih lama dari detik; Properti _6 , saat dideklarasikan untuk seluruh animasi, memungkinkan Anda menentukan bagaimana animasi berkembang selama satu iterasi animasi. Nilai untuk _6 adalah 8, 9, 0, 1 dan banyak lagi,Sebagai contoh kita, saya telah memilih 8, yang merupakan default. Jadi dalam hal ini, kita dapat mengabaikan properti dan animasi akan terlihat samaSelain itu, Anda dapat menerapkan fungsi pengaturan waktu tertentu untuk setiap bingkai utama, seperti ini
Fungsi pengaturan waktu yang terpisah menentukan masing-masing bingkai utama di atas. Salah satunya adalah nilai _3, yang menyentakkan animasi ke depan sejumlah langkah yang telah ditentukan sebelumnya. Bingkai kunci terakhir ( 7 atau 5) juga memiliki fungsi pengaturan waktunya sendiri, tetapi karena ini untuk keadaan akhir dari animasi yang diputar maju, fungsi pengaturan waktunya hanya berlaku jika animasi diputar secara terbalikDalam contoh kami, kami tidak akan menentukan fungsi pengaturan waktu tertentu untuk setiap bingkai utama, tetapi ini cukup untuk menunjukkan bahwa itu mungkin Jumlah dan Arah Iterasi AnimasiSekarang mari tambahkan dua baris lagi ke CSS kita
Ini memperkenalkan dua properti lagi. yang memberi tahu animasi berapa kali diputar, dan yang memberi tahu browser apakah akan mengganti urutan bingkai pada beberapa iterasi atau tidak Properti _6 disetel ke 7, artinya animasi hanya akan diputar sekali. Properti ini menerima nilai bilangan bulat atau 8Selain itu, properti _9 disetel ke 0 (default), yang berarti animasi akan diputar dengan arah yang sama (dari awal hingga akhir) setiap kali dijalankan. Dalam contoh kita, animasi disetel untuk berjalan hanya sekali, sehingga properti tidak diperlukan. Nilai lain yang dapat kita tentukan di sini adalah _1, yang membuat animasi diputar secara terbalik pada setiap iterasi lainnya. Biasanya, agar nilai 1 berlaku, jumlah iterasi harus memiliki nilai 3 atau lebih tinggiDelay dan Play State AnimasiMari tambahkan dua baris kode lagi 0Pertama, kami memperkenalkan properti _4, yang berfungsi persis seperti yang Anda pikirkan. itu memungkinkan Anda untuk menunda animasi dengan jumlah waktu yang ditentukan. Menariknya, properti ini dapat memiliki nilai negatif, yang menggerakkan titik awal di tengah animasi sesuai dengan nilai negatifProperti _5, yang dari spec, menerima salah satu dari dua kemungkinan nilai. 6 dan 7. Nilai ini memiliki penggunaan praktis yang terbatas. Standarnya adalah _6, dan nilai 7 hanya membuat animasi dimulai dalam keadaan dijeda, hingga diputar secara manual. Anda tidak dapat menentukan status 7 di CSS untuk keyframe individual; Mode Isi AnimasiKami akan menambahkan satu baris lagi ke kode kami, properti untuk menentukan "mode isian" _1Properti _1 memungkinkan Anda menentukan gaya elemen animasi sebelum dan/atau setelah animasi dijalankan. Nilai _2 menyebabkan gaya di bingkai kunci pertama diterapkan sebelum animasi berjalan. Nilai _3 menyebabkan gaya di keyframe terakhir diterapkan setelah animasi berjalan. Nilai _4 melakukan keduanyaMEMPERBARUI. Properti _1 tidak ada dalam draf spesifikasi terbaru, tetapi ditemukan di. Juga, versi Safari tertentu (5. 0 dan yang lebih lama) hanya akan menerapkan nilai "maju" jika ada tepat dua bingkai utama yang ditentukan. Peramban ini sepertinya selalu menggunakan bingkai utama ke-2 sebagai status "maju", yang tidak dilakukan oleh peramban lain; . Ini diperbaiki di Safari 5. 1StenoTerakhir, spesifikasi menjelaskan untuk animasi, yang menggabungkan enam properti yang dijelaskan di atas. Ini mencakup semua hal kecuali _5 dan 1Beberapa Catatan Pada Halaman Demo Dan Dukungan BrowserSeperti yang disebutkan, kode dalam artikel ini hanya untuk menganimasikan satu elemen dalam demo. matahari. Untuk melihat kode lengkap, kunjungi halaman demo. Anda dapat melihat semua sumber secara bersamaan atau menggunakan tab di sidebar untuk melihat kode untuk masing-masing elemen dalam animasi Demo tidak menggunakan gambar apa pun, dan animasinya tidak bergantung pada JavaScript. Matahari, bulan, dan awan semuanya dibuat menggunakan 8 CSS3, dan satu-satunya skrip di halaman adalah untuk tab di sebelah kanan dan untuk tombol yang memungkinkan pengguna memulai dan menyetel ulang animasiBerikut adalah browser yang mendukung animasi keyframe CSS3
Meskipun belum ada pengumuman resmi, dukungan di Opera diharapkan Jika Anda membuat kode animasi menggunakan satu sintaksis berbasis vendor, Anda dapat menggunakan alat seperti Prefixr atau Animation Fill Code untuk secara otomatis mengisikan kode tambahan untuk Anda Bagaimana cara kerja bingkai kunci CSS?Dalam CSS, keyframe digunakan untuk animasi. Ini memberi Anda lebih banyak kendali atas animasi yang ingin Anda tampilkan. Animasi dibuat dengan mengubah secara bertahap dari satu gaya ke gaya lainnya . Anda dapat mengubah gaya CSS sebanyak yang Anda inginkan.
Apa yang dijelaskan animasi keyframe?Untuk membuat tindakan dalam rangkaian animasi digital, Anda harus terlebih dahulu menentukan titik awal dan akhir tindakan tersebut. Penanda ini disebut bingkai kunci dan digunakan sebagai titik jangkar untuk tindakan di semua jenis program animasi yang berbeda, termasuk Adobe After Effects, Animate, dan Animator Karakter .
Bagaimana Anda menggunakan keyframes dalam animasi?Untuk menggunakan keyframe, buat aturan @keyframes dengan nama yang kemudian digunakan oleh properti animation-name untuk mencocokkan animasi dengan deklarasi keyframe.
Apa itu animasi CSS Bagaimana cara kerjanya?Animasi CSS memungkinkan untuk menganimasikan transisi dari satu konfigurasi gaya CSS ke konfigurasi lainnya . Animasi terdiri dari dua komponen, gaya yang menjelaskan animasi CSS dan sekumpulan keyframe yang menunjukkan status awal dan akhir gaya animasi, serta kemungkinan titik arah perantara. |