مجموعة من الكلاسات + CSS لتحريك العناصر المختلفة على الموقع

يمكنك أيضًا تغيير مدة الرسوم المتحركة والتأخير وعدد مرات التشغيل بنفسك عن طريق إضافة أنماط إلى العنصر

 لاستخدام animate.css على الموقع ، ما عليك سوى ضبط الأنماط ثم توصيل التأثيرات التي تريدها بالكتل المطلوبة.

مثال

مثال

---

طريقة التثبيت

ما عليك سوى إضافة أنماط animate.css إلى الموقع.

تحميل معاينة

---

استخدام الانماط

لتحريك عنصر ، تحتاج إلى إضافة فئة الرسوم المتحركة إليه والتأثير من الجدول أدناه.

class name
bounce	flash	pulse	rubberBand
shake	headShake	swing	tada
wobble	jello	bounceIn	bounceInDown
bounceInLeft	bounceInRight	bounceInUp	bounceOut
bounceOutDown	bounceOutLeft	bounceOutRight	bounceOutUp
fadeIn	fadeInDown	fadeInDownBig	fadeInLeft
fadeInLeftBig	fadeInRight	fadeInRightBig	fadeInUp
fadeInUpBig	fadeOut	fadeOutDown	fadeOutDownBig
fadeOutLeft	fadeOutLeftBig	fadeOutRight	fadeOutRightBig
fadeOutUp	fadeOutUpBig	flipInX	flipInY
flipOutX	flipOutY	lightSpeedIn	lightSpeedOut
rotateIn	rotateInDownLeft	rotateInDownRight	rotateInUpLeft
rotateInUpRight	rotateOut	rotateOutDownLeft	rotateOutDownRight
rotateOutUpLeft	rotateOutUpRight	hinge	jackInTheBox
rollIn	rollOut	zoomIn	zoomInDown
zoomInLeft	zoomInRight	zoomInUp	zoomOut
zoomOutDown	zoomOutLeft	zoomOutRight	zoomOutUp
slideInDown	slideInLeft	slideInRight	slideInUp
slideOutDown	slideOutLeft	slideOutRight	slideOutUp
heartBeat

يمكنك أيضًا إضافة infiniteclass لضبط  التأخير ومدة التأثير.

الوقت/المدة

class name	Delay time
delay-2s	2s
delay-3s	3s
delay-4s	4s
delay-5s	5s

التأخير

class name	Speed
slow	2s
slower	3s
fast	800ms
faster	500ms

مثال

<div class="animated infinite bounce delay-5s slower">مثال</div>

يمكنك أيضًا تغيير مدة الرسوم المتحركة والتأخير وعدد مرات التشغيل بنفسك عن طريق إضافة أنماط إلى العنصر:

.yourElement { animation-duration: 3s; animation-delay: 2s; animation-iteration-count: infinite; }

من أجل استخدام هذه التأثيرات عند التمرير في الصفحة ، يمكنك استخدام البرنامج النصي