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 > لإعطاء عنصر إدخال الرسوم المتحركة ، استخدم الأداة 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 >تعرف على المزيد في وثائق Enter Animation Opantation.
قم بتعيين دوران البداية للرسوم المتحركة باستخدام الأدوات المساعدة 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 >تعرف على المزيد في الرسوم المتحركة Enter Detate Documentation.
قم بتعيين مقياس بدء الرسوم المتحركة باستخدام الأدوات المساعدة 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 >تعرف على المزيد في وثائق مقياس الرسوم المتحركة.
قم بتعيين ترجمة البداية للرسوم المتحركة باستخدام الأدوات المساعدة 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 Translate Documentation.
قم بتعيين عتامة النهاية للرسوم 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 >تعرف على المزيد في وثائق OPEIT الرسوم المتحركة.
قم بتعيين دوران نهاية الرسوم 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 >تعرف على المزيد في Seit Animation Translate Documentation.
