tailwindcss motion

✨ gerakan tailwindcss β ✨

tailwindcss-motion adalah Plugin Tailwind CSS yang dibuat di RomboHQ. Ini adalah perpustakaan animasi yang sederhana namun kuat dengan sintaksis sederhana.

Gerak, tanpa keributan.

⚒️ Instalasi

1. Instal paket npm

npm i -D tailwindcss-motion

2. Tambahkan ke tailwind.config.js Anda

 // tailwind.config.js

export default {
     content : [ ... ] ,
     theme : {
        extend : { ... } ,
     } ,
     plugins : [ require ( 'tailwindcss-motion' ) ] ,
} ;

atau, untuk menggunakan ESM:

 import tailwindcssMotion from "tailwindcss-motion" ;

/** @type {import('tailwindcss').Config} */
export default {
     content : [ ... ] ,
     theme : {
          extend : { } ,
     } ,
     plugins : [ tailwindcssMotion ] ,
} ; 

Bagaimana cara kerjanya?

Kami menyediakan sintaks sederhana untuk menganimasikan elemen apa pun di proyek Tailwind Anda. Daripada mendefinisikan keyframe khusus, kami menyediakan kelas utilitas untuk menganimasikan setiap dimensi, secara inline.

Misalnya, untuk efek slide dan fade — Anda hanya perlu motion-translate-x-in-25 motion-opacity-in-0 atau, Anda dapat menggunakan salah satu preset kami dengan motion-preset-fade

Preset Gerakan

Kami menyediakan kumpulan preset untuk menganimasikan komponen Anda dengan mudah:

• Fade : motion-preset-fade
• Menggeser :
  • Kanan: motion-preset-slide-right
  • Kiri: motion-preset-slide-left
  • Atas: motion-preset-slide-up
  • Bawah: motion-preset-slide-down
• Fokus : motion-preset-focus
• kabur :
  • Kanan: motion-preset-blur-right
  • Kiri: motion-preset-blur-left
  • Atas: motion-preset-blur-up
  • Bawah: motion-preset-blur-down
• Bouncing : motion-preset-bounce
• Perluas : motion-preset-expand
• Kecilkan : motion-preset-shrink
• Pop : motion-preset-pop
• Kompres : motion-preset-compress
• Goyang : motion-preset-shake
• Wiggle : motion-preset-wiggle
• Confetti : motion-preset-confetti
• Mesin Ketik : motion-preset-typewriter-[number of characters]
• Flomoji : motion-preset-flomoji

Menyesuaikan Preset

Anda dapat menyesuaikan preset lebih lanjut menggunakan kelas animasi dasar dan pengubah.

Misalnya:

• Tambahkan penundaan pada motion-preset-fade :

 < div class =" motion-preset-fade motion-delay-500 " > </ div >

• Sesuaikan durasi motion-preset-slide-right :

 < div class =" motion-preset-slide-right motion-duration-2000 " > </ div >

• Tingkatkan ketinggian motion-preset-bounce :

 < div class =" motion-preset-bounce -motion-translate-y-in-150 " > </ div > 

Animasi Dasar

Selain preset, Anda dapat membuat animasi kustom Anda sendiri dengan menggabungkan kelas dasar berikut:

• Fade In : motion-opacity-in-0
• Geser Masuk :
  • Dari bawah: motion-translate-y-in-100
  • Dari atas: -motion-translate-y-in-100
• Skala Dalam : motion-scale-in-75
• Putar Masuk :
  • Dari 180 derajat: motion-rotate-in-180
  • Dari -90 derajat: -motion-rotate-in-90
• Blur In : motion-blur-in-sm
• Grayscale In : motion-grayscale-in
• Perubahan Warna Latar Belakang : motion-bg-in-red-500
• Perubahan Warna Teks : motion-text-in-blue-500

Menggabungkan Animasi

Anda dapat menggabungkan beberapa animasi pada satu elemen:

 < div
  class =" motion-scale-in-75 motion-translate-y-in-100 motion-rotate-in-90 "
> </ div >

Keluar dari animasi

Untuk animasi keluar, cukup ganti in dengan out pada nama kelas.

Pengubah

Anda dapat menyesuaikan fungsi durasi, penundaan, dan waktu animasi apa pun.

• Durasi : motion-duration-500
• Penundaan : motion-delay-500
• Fungsi Pengaturan Waktu : motion-timing-spring-bouncy

Misalnya:

 < div
  class =" motion-duration-2000 motion-rotate-in-180 motion-opacity-in-0 "
> </ div >

Ini menerapkan durasi 2000ms pada animasi rotasi dan opacity.

Pengubah untuk setiap properti

Anda dapat menerapkan pengubah ke properti tertentu menggunakan garis miring / .

Misalnya:

 < div
  class =" motion-delay-500/rotate motion-rotate-in-180 motion-opacity-in-0 "
> </ div >

Di sini, penundaan 500ms hanya diterapkan pada rotasi, bukan opacity.

Fungsi Kemudahan

Plugin ini mencakup fungsi pengaturan waktu khusus:

beberapa contohnya adalah:

• motion-ease-spring-smooth
• motion-ease-spring-snappy
• motion-ease-spring-bouncy
• motion-ease-spring-bounciest
• motion-ease-bounce
• motion-ease-bounce
• motion-ease-in-quart

Contoh

Halaman arahan - https://play.tailwindcss.com/uAuVF8F1vC

Dialog obrolan - https://play.tailwindcss.com/gjGqEKswjQ

Pulau Dinamis Baterai Rendah - https://play.tailwindcss.com/tvYFbHtNNQ

Contoh Warna Apple - https://play.tailwindcss.com/cvQ3Nk3v8j

Apa itu Rombo?

Rombo adalah perusahaan tahap awal, yang membangun alat untuk membantu perusahaan membangun antarmuka interaktif yang indah. Kami memulai dengan perangkat bagi para insinyur, desainer, dan pemasar kreatif untuk melakukan animasi secara native di dalam Alur Kerja umum — seperti Tailwind, Figma, Webflow, Shopify & masih banyak lagi yang akan datang! Mendaftarlah untuk mendapatkan pembaruan di situs kami di https://rombo.co