CSS dengan gerakan berkurang
Hentikan animasi CSS dekoratif saat gerakan berkurang diminta.
@keyframes mark-slide {
to { transform: translateX(12px); }
}
.motion-mark { animation: mark-slide 1.2s linear infinite; }
.status:focus-visible { outline: 2px solid currentColor; }
@media (prefers-reduced-motion: reduce) {
.motion-mark { animation: none; transform: none; }
}Proyek
Periksa kedua preferensi dan fokus papan ketik, mempertahankan teks status saat gerakan dinonaktifkan.
Tinjau sebelum menerapkan
Bandingkan perilaku sebenarnya dengan hasil yang diharapkan. Jika pemeriksaan gagal, cari penyebabnya sebelum membuat perubahan lain.
Model
Atur endpoint kompatibel OpenAI atau Anthropic dengan URL dasar dan kunci API jika diperlukan. Uji koneksi. Server model lokal harus berjalan; alat jarak jauh dapat mengirim data secara terpisah.
@keyframes mark-slide {
to { transform: translateX(12px); }
}
.motion-mark { animation: mark-slide 1.2s linear infinite; }
.status:focus-visible { outline: 2px solid currentColor; }
@media (prefers-reduced-motion: reduce) {
.motion-mark { animation: none; transform: none; }
}Perlakukan preferensi gerakan sebagai bagian dari perubahan antarmuka
MotionHearth adalah ruang kerja pemrograman Windows untuk mengembangkan perubahan antarmuka dengan model AI terhubung. Bawa folder proyek dan jelaskan pesan yang harus disampaikan interaksi. Percakapan dapat mengikuti komponen dan gayanya bersama-sama, membantu Anda meninjau usulan animasi dalam konteks status, fokus, atau umpan balik yang hendak disampaikannya.
Salah satu tugas yang disarankan motion.css adalah meninjau animasi ketika pengurangan gerakan diminta. Tanyakan bagaimana antarmuka yang ada menyampaikan informasi yang sama setelah gerakan berhenti, dan apakah fokus papan ketik tetap terlihat. Pertanyaan itu mengubah contoh menjadi perubahan aplikasi yang dapat diperiksa. Pertanyaan tersebut juga menjaga permintaan lebih luas daripada sekadar menghapus keyframe, tetapi tetap cukup kecil untuk diperiksa pada layar sebenarnya.
Anda dapat memilih model AI tanpa batasan jika endpoint kompatibel OpenAI atau Anthropic yang didukung menawarkannya. Tambahkan detail koneksi dan kredensial yang diperlukan, dengan memahami bahwa kemampuan serta pembatasan berasal dari model dan server. Tinjau hasil edit CSS dan komponen sebelum menguji antarmuka dengan gerakan aktif dan dikurangi. Gunakan navigasi papan ketik maupun masukan penunjuk. Tujuannya adalah perilaku yang selaras pada kedua preferensi, didukung oleh apa yang dirender aplikasi, bukan hanya deskripsi asisten.
Memeriksa gerakan dan interaksi bersama-sama
Apa yang perlu disebutkan dalam permintaan pengurangan gerakan?
Sebutkan elemen bergerak, informasi yang disampaikannya, dan perilaku alternatif yang Anda harapkan. Sertakan komponen serta stylesheet terkait. Ini memungkinkan usulan perubahan mempertahankan umpan balik yang berguna, bukan menghapus gerakan tanpa mempertimbangkan apa yang hilang bagi pengguna.
Bisakah animasi yang dihentikan menyembunyikan status saat ini?
Bisa, jika gerakan adalah satu-satunya penanda. Periksa teks, bentuk, atau penanda keadaan yang tersisa ketika animasi dinonaktifkan. Mintalah alternatif yang sesuai antarmuka, lalu verifikasi bahwa alternatif itu tetap jelas sepanjang interaksi.
Mengapa menguji fokus papan ketik saat mengubah gerakan?
Gaya di sekitar kontrol beranimasi juga dapat memengaruhi indikator fokusnya. Navigasikan layar yang berubah dengan papan ketik dan pastikan elemen mana yang aktif. Meninjau keyframe saja tidak membuktikan bahwa seluruh interaksi tetap dapat dipahami.
Seberapa banyak yang dapat diverifikasi model dari berkas sumber?
Model dapat mengusulkan penafsiran kode yang tersedia dalam konteks dan alatnya. Anda tetap perlu memeriksa keadaan yang dirender dan menjalankan pemeriksaan proyek. Perlakukan layar, gaya, atau kondisi eksekusi yang tidak tersedia sebagai batas tinjauan.
MotionHearth · Diperbarui 2026-10-25