Tempoh dan Pelancaran
Kawal tempoh peralihan dengan duration-75 hingga duration-1000, dan tetapkan fungsi pemasaan dengan ease-in, ease-out serta ease-in-out.
Tempoh dan Pelancaran ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 2 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 Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Tempoh dan Pemasaan dalam Reka Bentuk Gerakan
Dua sifat mengawal rasa sesuatu peralihan CSS: tempoh (berapa lama animasi berlangsung) dan fungsi pemasaan (bagaimana animasi memecut dan memperlahankan kelajuannya sepanjang tempoh tersebut). Menetapkan kedua-duanya dengan betul membezakan animasi yang terasa pantas dan disengajakan daripada animasi yang terasa perlahan atau mekanikal. Tailwind menyediakan utiliti untuk kedua-duanya, sekali gus memudahkan pelarasan rasa gerakan tanpa CSS tersuai.
Utiliti Tempoh
Utiliti duration-* Tailwind menetapkan sifat CSS transition-duration. Nilainya berjulat daripada duration-75 (75ms, sangat pantas) hingga duration-1000 (1000ms, satu saat penuh). Tempoh lalai apabila Anda menggunakan transition tanpa kelas duration-* ialah 150ms. Kebanyakan interaksi UI harus kurang daripada 300ms supaya terasa responsif — tempoh yang lebih lama hanya sesuai untuk animasi peringkat halaman yang dramatik.
<!-- Available duration utilities -->
duration-75 → 75ms
duration-100 → 100ms
duration-150 → 150ms (default)
duration-200 → 200ms
duration-300 → 300ms
duration-500 → 500ms
duration-700 → 700ms
duration-1000 → 1000ms
<!-- Example: fast button color change -->
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors duration-150">
Snappy button
</button>Memilih Tempoh yang Tepat
Tempoh hendaklah sepadan dengan saiz perubahan yang dirasai. Interaksi kecil seperti tuding butang, gelang fokus dan perubahan warna pautan kelihatan paling baik pada 100–200ms. Peralihan sederhana seperti menu lungsur muncul, kad mengembang atau petua alat memudar berfungsi dengan baik pada 200–300ms. Pergerakan besar seperti bar sisi meluncur masuk, modal muncul atau peralihan halaman boleh berlangsung sehingga 300–500ms. Jangan sekali-kali melebihi 500ms untuk peralihan UI — pengguna tidak sepatutnya berasa seperti sedang menunggu animasi.
<!-- 150ms: button hover (small interaction) -->
<button class="transition-colors duration-150 hover:bg-blue-700">Button</button>
<!-- 200ms: card shadow depth change (medium) -->
<div class="transition-shadow duration-200 hover:shadow-lg">Card</div>
<!-- 300ms: dropdown fade in (larger change) -->
<div class="transition-opacity duration-300 opacity-0 data-open:opacity-100">Dropdown</div>
<!-- 500ms: modal entrance (dramatic) -->
<div class="transition-all duration-500 scale-95 data-open:scale-100">Modal</div>Fungsi Pemasa (Pelembutan)
Fungsi pemasa (atau fungsi pelembutan) mengawal cara kemajuan animasi diagihkan mengikut masa. Animasi linear bergerak pada kelajuan tetap. Animasi ease-in bermula perlahan dan memecut. Animasi ease-out bermula pantas dan menyahpecut. Animasi ease-in-out bermula dan berakhir perlahan dengan bahagian tengah yang pantas. Interaksi yang berbeza terasa paling semula jadi dengan pelembutan yang berbeza — pemilihan yang tepat ialah perincian halus tetapi penting dalam reka bentuk UI yang kemas.
/* Tailwind easing utilities */
ease-linear → cubic-bezier(0, 0, 1, 1) /* constant speed */
ease-in → cubic-bezier(0.4, 0, 1, 1) /* slow start, fast end */
ease-out → cubic-bezier(0, 0, 0.2, 1) /* fast start, slow end */
ease-in-out → cubic-bezier(0.4, 0, 0.2, 1) /* slow start AND end */Menggunakan ease-in berbanding ease-out
Pemilihan antara ease-in dan ease-out mempunyai maksud yang intuitif: ease-in membina momentum (sesuai untuk elemen yang meninggalkan skrin atau menguncup) kerana elemen bermula perlahan dan semakin laju ketika keluar. ease-out menyahpecut (sesuai untuk elemen yang memasuki skrin) kerana elemen tiba dengan pantas lalu berhenti pada tempatnya dengan lancar. Ini mencerminkan fizik dunia sebenar — benda yang berhenti cenderung menyahpecut, manakala benda yang bermula cenderung memecut.
<!-- ease-out: element slides INTO view (decelerates on arrival) -->
<div class="-translate-x-full hover:translate-x-0 transition-transform duration-300 ease-out">
Slides in from left, decelerates to stop
</div>
<!-- ease-in: element exits screen (accelerates on departure) -->
<div class="translate-x-0 hover:translate-x-full transition-transform duration-300 ease-in">
Slides out to right, accelerating as it exits
</div>Corak ease-in-out
ease-in-out menghasilkan pergerakan yang paling terasa semula jadi untuk kebanyakan animasi UI. Ia meniru pergerakan objek fizikal: bermula dari keadaan pegun, mencapai kelajuan puncak, kemudian menyahpecut kembali ke keadaan pegun. Gunakannya sebagai tetapan lalai untuk sebarang animasi yang melibatkan elemen bergerak antara kedudukan — gelongsoran bar sisi, kemunculan modal, pengembangan kad dan togol akordion semuanya terasa paling semula jadi dengan ease-in-out.
<!-- ease-in-out: sidebar slide-in (feels most natural) -->
<aside class="-translate-x-full group-open:translate-x-0
transition-transform duration-300 ease-in-out
fixed left-0 top-0 h-full w-64 bg-white shadow-xl">
Sidebar content
</aside>
<!-- Accordion expand: ease-in-out for natural feel -->
<div class="max-h-0 overflow-hidden group-open:max-h-96
transition-all duration-300 ease-in-out">
Accordion content
</div>Utiliti Kelewatan
Utiliti delay-* menambah jeda sebelum peralihan bermula menggunakan sifat CSS transition-delay. Kelewatan berguna untuk animasi berperingkat — menjadikan sekumpulan elemen muncul satu demi satu menghasilkan kesan berlatarkan yang kelihatan kemas. Tailwind menyediakan kelewatan daripada delay-75 (75ms) hingga delay-1000 (1000ms). Gunakan kelewatan secara sederhana pada interaksi tuding — kelewatan yang hanya tercetus semasa tuding membuatkan UI terasa tidak responsif kepada pengguna.
<!-- Staggered card entrance animations -->
<div class="opacity-0 translate-y-4 animate-show" style="animation-delay: 0ms">Card 1</div>
<div class="opacity-0 translate-y-4 animate-show" style="animation-delay: 100ms">Card 2</div>
<div class="opacity-0 translate-y-4 animate-show" style="animation-delay: 200ms">Card 3</div>
<!-- Or with Tailwind delay utilities -->
<div class="... transition delay-0">First item</div>
<div class="... transition delay-100">Second item</div>
<div class="... transition delay-200">Third item</div>Tempoh dan Pelembutan Tersuai dalam Konfigurasi
Jika sistem reka bentuk anda memerlukan nilai pemasaan tertentu yang tiada dalam nilai lalai Tailwind — seperti duration-250 atau pelembutan cubic-bezier tersuai — tambahkan nilai tersebut dalam tailwind.config.js. Luaskan transitionDuration untuk nilai tempoh baharu dan transitionTimingFunction untuk lengkung pelembutan baharu. Pelembutan tersuai boleh menyampaikan keperibadian pergerakan jenama anda, lalu menjadikan animasi terasa tersendiri dan mudah dikenali.
// tailwind.config.js
module.exports = {
theme: {
extend: {
transitionDuration: {
'250': '250ms',
'400': '400ms',
'2000': '2000ms',
},
transitionTimingFunction: {
'spring': 'cubic-bezier(0.34, 1.56, 0.64, 1)', // overshoots then settles
'smooth': 'cubic-bezier(0.4, 0.0, 0.2, 1)', // material design standard
'sharp': 'cubic-bezier(0.4, 0.0, 0.6, 1)', // sharp accelerate/decelerate
},
},
},
};Pemasaan Peralihan untuk Interaksi Tuding
Teknik yang berguna untuk interaksi tuding ialah menggunakan pemasaan masuk dan keluar yang berbeza. Anda boleh mencapainya dengan menetapkan tempoh yang berbeza menggunakan awalan responsif atau keadaan. Lazimnya, peralihan masuk semasa tuding sedikit lebih pantas daripada peralihan keluar — kemunculan terasa pantas manakala pengakhiran memudar dengan lebih lembut. Ini memerlukan sedikit CSS tersuai atau manipulasi kelas JavaScript, kerana Tailwind tidak menyediakan varian 'un-hover' secara terbina dalam.
/* CSS: different timing for enter vs exit */
.hover-item {
@apply transition-all duration-300 ease-out; /* exit timing */
}
.hover-item:hover {
@apply duration-150; /* shorter on enter (faster response) */
/* Note: Tailwind generates .hover\:duration-150 for this */
}
<!-- Alternative: use hover:duration-* directly in HTML -->
<div class="transition-colors duration-300 hover:duration-150
bg-gray-100 hover:bg-blue-100">
Fast enter, slow exit
</div>Prestasi: will-change dan transform
Untuk elemen yang kerap dianimasikan, anda boleh memberi petunjuk kepada pelayar supaya mempromosikannya ke lapisan penggubahnya sendiri menggunakan will-change. Tailwind tidak mempunyai utiliti will-change terbina dalam pada terasnya, tetapi anda boleh menambahnya melalui nilai arbitrari atau utiliti tersuai. Walau bagaimanapun, gunakan will-change: transform secara sederhana — mempromosikan terlalu banyak elemen membazirkan memori dan sebenarnya boleh memperlahankan proses.
@layer utilities {
.will-change-transform {
will-change: transform;
}
.will-change-opacity {
will-change: opacity;
}
}
<!-- Apply to elements that animate very frequently -->
<div class="transition-transform duration-300 will-change-transform
hover:scale-105">
Frequently animated card (promoted layer)
</div>Menyahpepijat Peralihan dalam DevTools
Chrome DevTools mempunyai alat penyahpepijatan peralihan yang sangat baik. Buka panel Animations (More tools → Animations) untuk melihat semua animasi dan peralihan yang sedang berjalan. Anda boleh menyemak garis masa secara berperingkat, memainkan semula animasi pada kelajuan lebih perlahan (0.25x, 0.5x), dan memeriksa lengkung fungsi pemasaan yang dikira. Ini memudahkan anda mengesahkan bahawa pilihan tempoh dan pelembutan kelihatan tepat seperti yang dikehendaki tanpa perlu menuding dengan pantas untuk menangkap animasi yang singkat.
Semakan Pantas
Uji pemahaman anda tentang tempoh peralihan dan pelembutan dalam Tailwind CSS.
Imbas Kembali Pelajaran
Dalam pelajaran ini anda telah mempelajari: utiliti tempoh daripada duration-75 hingga duration-1000 mengawal tempoh peralihan, ease-out paling sesuai untuk elemen yang memasuki skrin manakala ease-in untuk elemen yang meninggalkan skrin, dan utiliti delay-* menambah jeda sebelum peralihan bermula, sekali gus membolehkan kesan animasi berperingkat. Seterusnya kita akan meneroka animasi kerangka utama terbina dalam Tailwind untuk corak pemuatan dan penarik perhatian.
Pelajari HTML 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
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Tempoh dan Pelancaran” percuma?
Ya — teks penuh “Tempoh dan Pelancaran” 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 Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Tempoh dan Pelancaran”?
Kawal tempoh peralihan dengan duration-75 hingga duration-1000, dan tetapkan fungsi pemasaan dengan ease-in, ease-out serta ease-in-out. Anda berlatih Tailwind 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 Tailwind CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind 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 2 daripada 4.
Berapa lamakah pelajaran “Tempoh dan Pelancaran” 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 Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind 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
- Utiliti Peralihan
- Tempoh dan Pelancaran
- Animasi Kerangka Kunci Terbina Dalam
- Animasi Tersuai dalam Konfigurasi