tailwindcss animate

tailwindcss-animate

Plugin CSS Tailwind untuk membuat animasi yang indah.

 <!-- Add an animated fade and zoom entrance -->
< div class =" animate-in fade-in zoom-in " > ... </ div >

<!-- Add an animated slide to top-left exit -->
< div class =" animate-out slide-out-to-top slide-out-to-left " > ... </ div >

<!-- Control animation duration -->
< div class =" ... duration-300 " > ... </ div >

<!-- Control animation delay -->
< div class =" ... delay-150 " > ... </ div >

<!-- And so much more! --> 

Instalasi

Instal plugin dari NPM:

npm install -D tailwindcss-animate

Kemudian tambahkan plugin ke file tailwind.config.js Anda:

 // @filename tailwind.config.js
module . exports = {
	theme : {
		// ...
	} ,
	plugins : [
		require ( "tailwindcss-animate" ) ,
		// ...
	] ,
} 

Dokumentasi

• Penggunaan dasar
  • Mengubah penundaan animasi
  • Mengubah arah animasi
  • Mengubah durasi animasi
  • Mengubah Mode Isi Animasi
  • Mengubah jumlah iterasi animasi
  • Mengubah keadaan bermain animasi
  • Mengubah fungsi waktu animasi
  • Lebih memilih gerak berkurang
• Masukkan & Keluar Animasi
  • Menambahkan Animasi Enter
  • Menambahkan animasi keluar
  • Mengubah Animasi Enter Animasi Mulai Opacity
  • Mengubah Rotasi Mulai Animasi Enter
  • Mengubah Skala Awal Animasi Enter
  • Mengubah Enter Animasi Mulai Terjemahan
  • Mengubah Keluar Animasi Berakhir Opacity
  • Mengubah Rotasi Akhir Animasi Keluar
  • Mengubah Skala Akhir Animasi Keluar
  • Mengubah Animasi Keluar Terjemahan Terjemahan

Penggunaan dasar

Mengubah penundaan animasi

Gunakan delay-{amount} Utilitas untuk mengontrol animation-delay elemen.

 < button class =" animate-bounce delay-150 duration-300 ... " > Button A </ button >
< button class =" animate-bounce delay-300 duration-300 ... " > Button B </ button >
< button class =" animate-bounce delay-700 duration-300 ... " > Button C </ button >

Pelajari lebih lanjut dalam dokumentasi keterlambatan animasi.

Mengubah arah animasi

Gunakan direction-{keyword} utilitas untuk mengontrol animation-delay elemen.

 < button class =" animate-bounce direction-normal ... " > Button A </ button >
< button class =" animate-bounce direction-reverse ... " > Button B </ button >
< button class =" animate-bounce direction-alternate ... " > Button C </ button >
< button class =" animate-bounce direction-alternate-reverse ... " > Button C </ button >

Pelajari lebih lanjut dalam dokumentasi arah animasi.

Mengubah durasi animasi

Gunakan duration-{amount} utilitas untuk mengontrol animation-duration elemen.

 < button class =" animate-bounce duration-150 ... " > Button A </ button >
< button class =" animate-bounce duration-300 ... " > Button B </ button >
< button class =" animate-bounce duration-700 ... " > Button C </ button >

Pelajari lebih lanjut dalam dokumentasi durasi animasi.

Mengubah Mode Isi Animasi

Gunakan fill-mode-{keyword} utilitas untuk mengontrol animation-fill-mode elemen.

 < button class =" animate-bounce fill-mode-none ... " > Button A </ button >
< button class =" animate-bounce fill-mode-forwards ... " > Button B </ button >
< button class =" animate-bounce fill-mode-backwards ... " > Button C </ button >
< button class =" animate-bounce fill-mode-both ... " > Button C </ button >

Pelajari lebih lanjut dalam dokumentasi Mode Isi Animasi.

Mengubah jumlah iterasi animasi

Gunakan utilitas repeat-{amount} untuk mengontrol animation-iteration-count elemen.

 < button class =" animate-bounce repeat-0 ... " > Button A </ button >
< button class =" animate-bounce repeat-1 ... " > Button B </ button >
< button class =" animate-bounce repeat-infinite ... " > Button C </ button >

Pelajari lebih lanjut dalam dokumentasi penghitungan iterasi animasi.

Mengubah keadaan bermain animasi

Gunakan utilitas running dan paused untuk mengontrol animation-play-state elemen.

 < button class =" animate-bounce running ... " > Button B </ button >
< button class =" animate-bounce paused ... " > Button A </ button >

Pelajari lebih lanjut dalam dokumentasi State Play Animation.

Mengubah fungsi waktu animasi

Gunakan utilitas ease-{keyword} untuk mengontrol animation-timing-function elemen.

 < button class =" animate-bounce ease-linear ... " > Button A </ button >
< button class =" animate-bounce ease-in ... " > Button B </ button >
< button class =" animate-bounce ease-out ... " > Button C </ button >
< button class =" animate-bounce ease-in-out ... " > Button C </ button >

Pelajari lebih lanjut dalam dokumentasi fungsi waktu animasi.

Lebih memilih gerak berkurang

Untuk situasi di mana pengguna telah menentukan bahwa mereka lebih suka gerakan yang dikurangi, Anda dapat secara kondisional menerapkan animasi dan transisi menggunakan varian motion-safe dan motion-reduce :

 < button class =" motion-safe:animate-bounce ... " > Button B </ button >

Masukkan & Keluar Animasi

Menambahkan Animasi Enter

Untuk memberikan elemen animasi Enter, gunakan utilitas animate-in , dalam kombinasi dengan beberapa utilitas fade-in , spin-in , zoom-in , dan slide-in-from .

 < button class =" animate-in fade-in ... " > Button A </ button >
< button class =" animate-in spin-in ... " > Button B </ button >
< button class =" animate-in zoom-in ... " > Button C </ button >
< button class =" animate-in slide-in-from-top ... " > Button D </ button >
< button class =" animate-in slide-in-from-left ... " > Button E </ button >

Pelajari lebih lanjut di dokumentasi Enter Animation.

Menambahkan animasi keluar

Untuk memberikan elemen animasi keluar, gunakan utilitas animate-out , dalam kombinasi dengan beberapa utilitas fade-out , spin-out , zoom-out , dan slide-out-from .

 < button class =" animate-out fade-out ... " > Button A </ button >
< button class =" animate-out spin-out ... " > Button B </ button >
< button class =" animate-out zoom-out ... " > Button C </ button >
< button class =" animate-out slide-out-from-top ... " > Button D </ button >
< button class =" animate-out slide-out-from-left ... " > Button E </ button >

Pelajari lebih lanjut dalam dokumentasi animasi keluar.

Mengubah Animasi Enter Animasi Mulai Opacity

Atur opacity awal animasi menggunakan utilitas fade-in-{amount} .

 < button class =" animate-in fade-in ... " > Button A </ button >
< button class =" animate-in fade-in-25 ... " > Button B </ button >
< button class =" animate-in fade-in-50 ... " > Button C </ button >
< button class =" animate-in fade-in-75 ... " > Button C </ button >

Pelajari lebih lanjut di dokumentasi ENTER Animation Opacity.

Mengubah Rotasi Mulai Animasi Enter

Atur rotasi awal animasi menggunakan utilitas spin-in-{amount} .

 < button class =" animate-in spin-in-1 ... " > Button A </ button >
< button class =" animate-in spin-in-6 ... " > Button B </ button >
< button class =" animate-in spin-in-75 ... " > Button C </ button >
< button class =" animate-in spin-in-90 ... " > Button C </ button >

Pelajari lebih lanjut di dokumentasi rotasi animasi enter.

Mengubah Skala Awal Animasi Enter

Atur skala awal animasi menggunakan utilitas zoom-in-{amount} .

 < button class =" animate-in zoom-in ... " > Button A </ button >
< button class =" animate-in zoom-in-50 ... " > Button B </ button >
< button class =" animate-in zoom-in-75 ... " > Button C </ button >
< button class =" animate-in zoom-in-95 ... " > Button C </ button >

Pelajari lebih lanjut di dokumentasi Enter Animation Scale.

Mengubah Enter Animasi Mulai Terjemahan

Atur terjemahan awal animasi menggunakan utilitas slide-in-from-{direction}-{amount} .

 < button class =" animate-in slide-in-from-top ... " > Button A </ button >
< button class =" animate-in slide-in-from-bottom-48 ... " > Button B </ button >
< button class =" animate-in slide-in-from-left-72 ... " > Button C </ button >
< button class =" animate-in slide-in-from-right-96 ... " > Button C </ button >

Pelajari lebih lanjut di dokumentasi Enter Animation Translate.

Mengubah Keluar Animasi Berakhir Opacity

Atur opacity akhir dari suatu animasi menggunakan utilitas fade-out-{amount} .

 < button class =" animate-out fade-out ... " > Button A </ button >
< button class =" animate-out fade-out-25 ... " > Button B </ button >
< button class =" animate-out fade-out-50 ... " > Button C </ button >
< button class =" animate-out fade-out-75 ... " > Button C </ button >

Pelajari lebih lanjut dalam dokumentasi Oxit Animation Opacity.

Mengubah Rotasi Akhir Animasi Keluar

Atur rotasi akhir animasi menggunakan utilitas spin-out-{amount} .

 < button class =" animate-out spin-out-1 ... " > Button A </ button >
< button class =" animate-out spin-out-6 ... " > Button B </ button >
< button class =" animate-out spin-out-75 ... " > Button C </ button >
< button class =" animate-out spin-out-90 ... " > Button C </ button >

Pelajari lebih lanjut di dokumentasi Rotate Animasi Keluar.

Mengubah Skala Akhir Animasi Keluar

Atur skala akhir dari suatu animasi menggunakan utilitas zoom-out-{amount} .

 < button class =" animate-out zoom-out ... " > Button A </ button >
< button class =" animate-out zoom-out-50 ... " > Button B </ button >
< button class =" animate-out zoom-out-75 ... " > Button C </ button >
< button class =" animate-out zoom-out-95 ... " > Button C </ button >

Pelajari lebih lanjut dalam dokumentasi Skala Animasi Keluar.

Mengubah Animasi Keluar Terjemahan Terjemahan

Atur terjemahan akhir dari animasi menggunakan utilitas slide-out-to-{direction}-{amount} .

 < button class =" animate-out slide-out-to-top ... " > Button A </ button >
< button class =" animate-out slide-out-to-bottom-48 ... " > Button B </ button >
< button class =" animate-out slide-out-to-left-72 ... " > Button C </ button >
< button class =" animate-out slide-out-to-right-96 ... " > Button C </ button >

Pelajari lebih lanjut dalam dokumentasi terjemahan animasi keluar.