C✳CODEZ.WIN
🌐 Bahasa Indonesia

Panduan membaca yang dilokalisasi

web-animation-designTujuan, penggunaan, dan sumber

Merancang dan mengimplementasikan animasi web yang terasa alami dan bertujuan. Gunakan keterampilan ini secara proaktif setiap kali pengguna mengajukan pertanyaan tentang animasi, gerakan, easing, pengaturan waktu, durasi, spring, transisi, atau performa animasi. Ini termasuk pertanyaan tentang cara menganimasikan elemen UI tertentu, easing mana yang harus digunakan, praktik terbaik animasi, atau pertimbangan aksesibilitas untuk gerakan. Pemicu pada: easing, ease-out, ease-in, ease-in-out, cubic-bezier, bounce, spring physics, keyframes, transform, opacity, fade, slide, scale, hover effects, microinteractions, Framer Motion, React Spring, GSAP, CSS transitions.entrance/exitanimasi, transisi halaman, penataan bertingkat, akan berubah, akselerasi GPU, lebih menyukai pengurangan gerakan,modal/dropdown/tooltip/popover/drawerAnimasi, animasi gerakan, interaksi seret, sensasi tekan tombol, terasa kaku, buatlah lebih halus.

Sumber diambil:

Repositori sumber
vercel-labs/open-agents
SKILL.md
.agents/skills/web-animation-design/SKILL.md
Bintang Repositori
5,871
Pembaruan terakhir repositori
2026-08-29
Klasifikasi Kemampuan
Alur Kerja Agen
Waktu pengumpulan terbaru

Lisensi: MIT

SKILL.md asli

Cuplikan alur kerja adalah alat bantu baca, bukan instruksi yang dapat dieksekusi dari Codez. Tidak ada Skill pihak ketiga yang dijalankan untuk menghasilkan halaman ini.

Bagian yang menjelaskan tujuan dan alur kerja di bawah ini merupakan materi dari hulu, yang telah diorganisir dan diterjemahkan untuk dibaca. Bagian ini berbeda dari analisis editorial Codez yang diberi label secara terpisah.

Apa yang dilakukan oleh Skill ini?

Merancang dan mengimplementasikan animasi web yang terasa alami dan bertujuan. Gunakan keterampilan ini secara proaktif setiap kali pengguna mengajukan pertanyaan tentang animasi, gerakan, easing, pengaturan waktu, durasi, spring, transisi, atau performa animasi. Ini termasuk pertanyaan tentang cara menganimasikan elemen UI tertentu, easing mana yang harus digunakan, praktik terbaik animasi, atau pertimbangan aksesibilitas untuk gerakan. Pemicu pada: easing, ease-out, ease-in, ease-in-out, cubic-bezier, bounce, spring physics, keyframes, transform, opacity, fade, slide, scale, hover effects, microinteractions, Framer Motion, React Spring, GSAP, CSS transitions.entrance/exitanimasi, transisi halaman, penataan bertingkat, akan berubah, akselerasi GPU, lebih menyukai pengurangan gerakan,modal/dropdown/tooltip/popover/drawerAnimasi, animasi gerakan, interaksi seret, sensasi tekan tombol, terasa kaku, buatlah lebih halus.

Bagaimana alur kerja hulu bekerja

Panduan Singkat

Setiap keputusan animasi dimulai dengan pertanyaan-pertanyaan ini: Apakah elemen ini masuk atau keluar? → Gunakanease-outApakah elemen di layar sedang bergerak? → Gunakanease-in-outApakah inihover/colortransisi? → Gunakanease

Jalur hulu · L42 ↗

Kapan Harus Membuat Animasi?

Enter/exitTransisi untuk konsistensi spasial. Perubahan status yang mendapat manfaat dari kontinuitas visual. Respons terhadap tindakan pengguna (umpan balik). Interaksi yang jarang digunakan di mana daya tarik menambah nilai.

Jalur hulu · L144 ↗

Kapan Menggunakan Pegas?

Interaksi seret dengan momentum Elemen yang terasa "hidup" (Pulau Dinamis) Gerakan yang dapat dihentikan di tengah animasi Antarmuka organik dan menyenangkan

Jalur hulu · L169 ↗
Jalur hulu · ↗
Before: transform: scale(0)
After: transform: scale(0.95)
────────────────────────────
Before: 400ms duration
After: 200ms

Persyaratan dan pengaturan

Tidak ada bagian persyaratan singkat yang dipilih dari file ini. Ini tidak berarti Skill tersebut tidak memiliki dependensi. Periksa petunjuk pengaturan repositori dan file yang dirujuk.

Batasan dan pemeriksaan kualitas

perlahan-lahan (Hampir Tidak Pernah)

Hindari penggunaan untuk animasi UI. Membuat antarmuka terasa lambat karena permulaan yang lambat menunda umpan balik visual.

Jalur hulu · L100 ↗

Mulailah dengan uji coba yang aman.

  1. Periksa host yang didukung dan petunjuk instalasi repositori. Simpan direktori Skill beserta skrip, aset, dan dokumentasi yang dirujuk di dalamnya secara bersamaan;SKILL.mdsendirian dapat menghilangkan dependensi.
  2. Berikan input sebenarnya, output yang diinginkan, dan kriteria penerimaan kepada agen. Sintaks pemanggilan dan alat yang tersedia bergantung pada host; situs ini tidak mengasumsikan perintah instalasi universal.
  3. Cobalah alur kerja sumber dalam proyek sementara atau pada salinannya. Tinjau operasi yang mengubah file, layanan jarak jauh, atau sumber daya yang dapat ditagih sebelum mengizinkannya.
  4. Validasi output terhadap pemeriksaan kualitas sumber dan persyaratan Anda sendiri. Pemicu yang berhasil atau jumlah bintang repositori yang tinggi tidak menjamin hasil yang benar.

Spesifikasi format dan direktori keterampilan ↗

Baca selengkapnya di sumber aslinya.

Terjemahan dan ruang lingkup

Panduan membaca ini memilih bagian-bagian dari teks yang telah disematkan di bagian atas.SKILL.mdTerjemahan ini dibantu. Ini bukan manual lengkap atau klaim kompatibilitas yang telah diuji. Bacalah dokumen asli dan file referensinya sebelum digunakan.

Pendahuluan ini mengacu pada versi yang disematkan di bawah ini; aktivitas repositori saat ini dan waktu pengumpulan ditampilkan secara terpisah.

Sumber yang disematkan
Baca teks aslinya ↗
Sumber diambil
Komit sumber
cf865e94de7729751c747171785b6ce57e7b178c
Sumber SHA-256
dfcfd66edc4b09e22416c8be59160fd15259965e5f6f1cfa098858d7b23d4332
Kembali ke katalog Keterampilan lengkap