tailwindcss-animateปลั๊กอิน CSS Tailwind สำหรับการสร้างภาพเคลื่อนไหวที่สวยงาม
<!-- 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! --> ติดตั้งปลั๊กอินจาก NPM:
npm install -D tailwindcss-animate จากนั้นเพิ่มปลั๊กอินลงในไฟล์ tailwind.config.js ของคุณ:
// @filename tailwind.config.js
module . exports = {
theme : {
// ...
} ,
plugins : [
require ( "tailwindcss-animate" ) ,
// ...
] ,
} ใช้ยูทิลิตี้ delay-{amount} เพื่อควบคุม animation-delay ขององค์ประกอบ
< 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 >เรียนรู้เพิ่มเติมในเอกสารการหน่วงแอนิเมชั่น
ใช้ยูทิลิตี้ direction-{keyword} เพื่อควบคุม animation-delay ขององค์ประกอบ
< 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 >เรียนรู้เพิ่มเติมในเอกสารทิศทางแอนิเมชั่น
ใช้ยูทิลิตี้ duration-{amount} เพื่อควบคุม animation-duration ขององค์ประกอบ
< 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 >เรียนรู้เพิ่มเติมในเอกสารระยะเวลาแอนิเมชั่น
ใช้ยูทิลิตี้ fill-mode-{keyword} เพื่อควบคุม animation-fill-mode ขององค์ประกอบ
< 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 >เรียนรู้เพิ่มเติมในเอกสารโหมดเติมแอนิเมชั่น
ใช้ยูทิลิตี้ repeat-{amount} เพื่อควบคุม animation-iteration-count ขององค์ประกอบ
< 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 >เรียนรู้เพิ่มเติมในเอกสารการนับซ้ำของแอนิเมชั่น
ใช้ยูทิลิตี้ running และ paused เพื่อควบคุม animation-play-state ขององค์ประกอบ
< button class =" animate-bounce running ... " > Button B </ button >
< button class =" animate-bounce paused ... " > Button A </ button >เรียนรู้เพิ่มเติมในเอกสารการเล่นแอนิเมชั่น
ใช้ยูทิลิตี้ ease-{keyword} เพื่อควบคุมฟังก์ชั่น animation-timing-function ขององค์ประกอบ
< 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 >เรียนรู้เพิ่มเติมในเอกสารฟังก์ชั่นการกำหนดเวลาภาพเคลื่อนไหว
สำหรับสถานการณ์ที่ผู้ใช้ระบุว่าพวกเขาต้องการการเคลื่อนไหวที่ลดลงคุณสามารถใช้แอนิเมชั่นและการเปลี่ยนผ่านตามเงื่อนไขโดยใช้ motion-safe และ motion-reduce :
< button class =" motion-safe:animate-bounce ... " > Button B </ button > เพื่อให้องค์ประกอบเป็นแอนิเมชั่น Enter ให้ใช้ยูทิลิตี้ animate-in ร่วมกับยูทิลิตี้ fade-in spin-in zoom-in และ 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 >เรียนรู้เพิ่มเติมในเอกสารแอนิเมชั่น Enter
เพื่อให้องค์ประกอบเป็นภาพเคลื่อนไหวทางออกให้ใช้ยูทิลิตี้ animate-out ร่วมกับยูทิลิตี้ fade-out spin-out zoom-out และ 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 >เรียนรู้เพิ่มเติมในเอกสารประกอบแอนิเมชั่นออก
ตั้งค่าความทึบเริ่มต้นของภาพเคลื่อนไหวโดยใช้ยูทิลิตี้ 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 >เรียนรู้เพิ่มเติมในเอกสารประกอบการเคลื่อนไหวของอนิเมชั่น
ตั้งค่าการหมุนเริ่มต้นของภาพเคลื่อนไหวโดยใช้ยูทิลิตี้ 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 >เรียนรู้เพิ่มเติมในเอกสารประกอบแอนิเมชั่นหมุน
ตั้งค่าสเกลเริ่มต้นของภาพเคลื่อนไหวโดยใช้ยูทิลิตี้ 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 >เรียนรู้เพิ่มเติมในเอกสารมาตราส่วนแอนิเมชั่น Enter
ตั้งค่าการแปลเริ่มต้นของภาพเคลื่อนไหวโดยใช้ 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 >เรียนรู้เพิ่มเติมในเอกสารการแปลแอนิเมชั่น Enter
ตั้งค่าความทึบสิ้นสุดของแอนิเมชั่นโดยใช้ยูทิลิตี้ 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 >เรียนรู้เพิ่มเติมในเอกสารความทึบของแอนิเมชั่นทางออก
ตั้งค่าการหมุนตอนจบของภาพเคลื่อนไหวโดยใช้ยูทิลิตี้ 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 >เรียนรู้เพิ่มเติมในเอกสารประกอบแอนิเมชั่นทางออกหมุน
ตั้งค่าระดับสิ้นสุดของภาพเคลื่อนไหวโดยใช้ยูทิลิตี้ 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 >เรียนรู้เพิ่มเติมในเอกสารมาตราส่วนแอนิเมชั่นออก
ตั้งค่าการแปลตอนจบของภาพเคลื่อนไหวโดยใช้ยูทิลิตี้ 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 >เรียนรู้เพิ่มเติมในเอกสารประกอบการแปลแอนิเมชั่นออก
