يمكنك أيضًا تغيير مدة الرسوم المتحركة والتأخير وعدد مرات التشغيل بنفسك عن طريق إضافة أنماط إلى العنصر
لاستخدام 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 |
مثال
من أجل استخدام هذه التأثيرات عند التمرير في الصفحة ، يمكنك استخدام البرنامج النصي
COMMENTS