Masuk
Beranda
Harga
Dokumentasi
Feedback
Bahasa Indonesia

Mengatur animasi

Last updated on 12/6/2024@mrbirddev

Slidde.co memungkinkan Anda untuk menerapkan animasi keyframe CSS standar ke elemen web Anda dengan mudah. Berikut adalah panduan langkah demi langkah untuk membantu Anda memulai.

Opsi Animasi di sidebar

  1. Pilih Elemen: Klik pada elemen apa pun di halaman Anda.
  2. Buka Modal Animasi: Di sidebar kanan, klik tombol tab Animasi, Anda akan menemukan opsi Animasi. Klik untuk membuka jendela modal.
  3. Mulai dengan Preset: Kami merekomendasikan memulai dengan animasi preset, yang kemudian dapat Anda modifikasi sesuai kebutuhan Anda. Anda dapat mengklik tombol preset untuk mengganti dengan preset. Jika Anda mengklik ikon plus di tombol, preset akan ditambahkan ke animasi saat ini.

Menyesuaikan Animasi

Modal animasi menyederhanakan proses pengaturan animasi keyframe CSS menjadi antarmuka low-code, membuatnya dapat diakses bahkan jika Anda tidak terbiasa dengan pengkodean.

Animasi keyframe adalah tempat Anda mendefinisikan properti CSS untuk persentase tertentu. Dan browser menangani transisi untuk Anda.

Misalnya, jika Anda memiliki keyframe seperti ini dengan durasi 4 detik.

0% translateX(0)

50% translateX(-20px)

100% trasnlateX(0)

Objek akan bergerak 20px ke bawah selama 2 detik, kemudian bergerak 20px ke atas kembali ke posisi semula selama 2 detik.

Jika Anda mengalami masalah atau ingin mempelajari lebih lanjut tentang animasi keyframe:

  • Cari Online: Google pertanyaan spesifik Anda; ada banyak contoh dan sumber daya yang tersedia.
  • Tutorial CSS Keyframes: Rujuk ke panduan resmi CSS keyframes di MDN untuk informasi lengkap.

Pemicu

Bidang ini mengontrol kapan animasi diputar.

  • Elemen ditampilkan: Ini adalah yang default. Animasi akan dipicu ketika elemen digulirkan ke tampilan, atau bagian yang berisi ditampilkan Bagian hash
  • Elemen ditampilkan (putar ulang setiap kali): Sama seperti di atas, kecuali animasi akan diputar ulang setiap kali elemen ditampilkan.
  • Halaman dimuat: Animasi akan dipicu ketika halaman dimuat.

Target

Biasanya Anda tidak perlu mengatur ini. Nilai default adalah & yang berarti elemen root.

Namun, ada beberapa kasus di mana Anda perlu mengaturnya.

  • Untuk menganimasikan elemen Latar belakang lanjutan, Anda dapat mengatur Target ke Elemen anak pertama, karena elemen Latar belakang lanjutan akan selalu menjadi anak pertama dari elemen root.

  • Untuk menerapkan penundaan bertahap ke semua elemen anak. Baca lebih lanjut di bagian Delay & staggering delay untuk detail lebih lanjut.

Delay & staggering delay

Jika Anda mengatur Penundaan ke 1000ms, animasi akan diputar setelah menunggu selama 1000ms.

Jika Anda mengatur Bertahap ke 50ms dan mengatur target ke Semua elemen anak langsung. Animasi akan diterapkan pada masing-masing elemen anak langsung, dan menunggu

  • elemen pertama, 1000ms,
  • elemen kedua, 1050ms,
  • elemen ketiga, 1100ms,
  • ...

Text staggering

Ini berfungsi untuk komponen Teks.

Jika Anda mengatur Bertahap dan mengatur target ke Semua huruf. Efek bertahap akan diterapkan pada setiap huruf.

Gunakan properti css animation

Animasi css biasa selalu tersedia untuk semua elemen di CSS. Namun, Anda mungkin perlu mengaktifkan Disable in canvas untuk aturan css tertentu agar lebih mudah diedit di editor.

Loading...