Merantai dan Menyusun Urutan Animasi
Cipta urutan kompleks dengan merantai berbilang animasi bersama kelewatan berperingkat.
Merantai dan Menyusun Urutan Animasi ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.
Mengapakah Animasi Dijujukkan?
Kesan antara muka pengguna yang kompleks selalunya memerlukan beberapa animasi yang berlaku mengikut turutan: elemen meluncur masuk, berhenti seketika, kemudian pudar keluar. CSS menyediakan beberapa alat untuk merangkaikan animasi tanpa JavaScript.
Menggunakan animation-delay untuk Penjujukan
Penjujukan paling mudah: kira masa animasi seterusnya perlu bermula berdasarkan tempoh animasi sebelumnya:
<div class="element">Slides in, then fades out</div>
Bingkai Utama Berbilang Langkah
Pendekatan yang paling kemas untuk satu elemen: kodkan keseluruhan jujukan dalam satu peraturan @keyframes dengan titik peralihan berasaskan peratusan:
<div class="toast">Notification toast</div>
Sifat Tersuai CSS untuk Tempoh
Simpan tempoh dalam pemboleh ubah CSS untuk memudahkan penyelarasan antara animasi yang dirangkaikan:
<div class="box">Custom-property-driven timing</div>
animation-timeline (Moden)
API Animasi Web dan animasi yang dipautkan kepada penatalan (ScrollTimeline) membolehkan penjujukan canggih tanpa pengiraan matematik kelewatan. Inilah masa depan pengaturan animasi CSS yang kompleks.
Animasi Berperingkat dengan Sifat Tersuai CSS
Pacu kelewatan berperingkat daripada sifat tersuai CSS yang ditetapkan secara sebaris atau melalui JavaScript:
<div class="item" style="--delay:0ms">Item 1</div>
<div class="item" style="--delay:120ms">Item 2</div>
<div class="item" style="--delay:240ms">Item 3</div>
Penjujukan Dipacu JavaScript
Untuk jujukan berbilang elemen yang tepat, gunakan API Animasi Web atau pustaka seperti GSAP. CSS sahaja mempunyai batasan untuk menyelaras elemen bebas yang mempunyai kebergantungan kompleks antara satu sama lain.
Animasi Menarik Perhatian
Jujukan animasi untuk menarik perhatian dengan denyutan kemudian kembali stabil:
<div class="notification">New message!</div>
Peristiwa AnimationEnd
Dengar animationend dalam JavaScript untuk mencetuskan langkah seterusnya secara terprogram:
<div class="box" id="ae-box">Watch me</div>
<script>
const el = document.getElementById('ae-box');
el.addEventListener('animationend', (e) => {
if (e.animationName === 'slideIn') {
el.classList.add('phase-2');
el.textContent = 'animationend fired!';
}
});
</script>
Corak Peralihan Halaman
Jujukan peralihan halaman CSS menggunakan togol kelas:
<div class="page-leaving">Leaving page</div>
<div class="page-entering">Entering page</div>
Rangka Keadaan Pemuatan
Animasi pemuatan rangka berbilang langkah menggunakan ofset:
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
Semakan Pantas
Apakah cara terbaik untuk mengekodkan jujukan animasi berbilang langkah yang lengkap bagi satu elemen dalam CSS?
Ringkasan
Penjujukan animasi CSS menggunakan kelewatan yang dipadankan dengan tempoh sebelumnya, @keyframes berbilang langkah dengan titik peralihan berasaskan peratusan, atau pemboleh ubah tempoh dalam sifat tersuai. Peristiwa animationend membolehkan fasa berjujukan yang dicetuskan oleh JavaScript. Untuk pengaturan berbilang elemen yang kompleks, pertimbangkan API Animasi Web.
Pelajari CSS dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “Merantai dan Menyusun Urutan Animasi” percuma?
Ya — teks penuh “Merantai dan Menyusun Urutan Animasi” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Merantai dan Menyusun Urutan Animasi”?
Cipta urutan kompleks dengan merantai berbilang animasi bersama kelewatan berperingkat. Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Merantai dan Menyusun Urutan Animasi” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Sintaks @keyframes dan Sifat Animasi
- Arah, Mod Isian dan Ulangan Animasi
- Merantai dan Menyusun Urutan Animasi
- Animasi Boleh Diakses dengan prefers-reduced-motion