Animasi Tombol

Bawaan

Mungkin sedikit berbeda dari antarmuka sebenarnya.

Poin utama:
Mengatur animasi yang berjalan pada tombol dalam status normal.

Dampak:
Karena animasi selalu terlihat, pengaturan ini sangat mempengaruhi kesan visual.

Tips:
Gunakan efek yang ringan agar tetap nyaman dilihat dalam durasi panjang.

Item pengaturan

• Pilihan animasi default: memilih jenis animasi utama tombol.
• Opsi termasuk none (Tidak ada) dan berbagai pola animasi berulang.

Berbeda dari Animasi Teks/Ikon (yang umumnya dipicu hover), Animasi Tombol cenderung terlihat terus-menerus. Gunakan secukupnya agar tidak terasa berisik.

Transisi

<hr style="margin-top:60px"> <p style="font-size:12px;color:#999;">Total: 109 | Rendered: 109 | Skipped: 0</p><p class="docs-capture-placeholder__caption">実際と少し異なる場合があります。</p>

Poin utama:
Mengatur kecepatan dan interval loop animasi tombol.

Dampak:
Terlalu cepat dapat mengganggu fokus, terlalu lambat bisa terasa kurang responsif.

Tips:
Mulai dari nilai moderat, lalu sesuaikan berdasarkan konteks halaman.

Item pengaturan

• Durasi Animasi (ms): lama satu siklus animasi.
• Pelemahan: kurva percepatan/perlambatan animasi.
• Nilai Kustom: nilai easing kustom (cubic-bezier).
• Loop Interval (ms): jeda antar pengulangan.
• Setel Ulang: mengembalikan pengaturan bagian ini ke nilai awal.

Saat digabung dengan Animasi Bingkai, sebaiknya salah satunya dibuat lebih halus agar tidak terlalu ramai.

Catatan transform:
Banyak preset animasi tombol menggunakan properti transform (translate, scale, rotate). Jika Anda menambahkan transform sendiri melalui CSS kustom pada elemen yang sama, nilainya bisa saling menimpa saat animasi berjalan.

Aksesibilitas:
Dukungan otomatis prefers-reduced-motion belum diterapkan pada implementasi saat ini. Jika diperlukan, tambahkan aturan CSS di tema untuk membatasi animasi bagi pengguna yang mengaktifkan reduced motion.