12 مورد رائع للرسوم المتحركة في CSS
12 مورد رائع للرسوم المتحركة في CSS
تُستخدم مكتبات وأدوات الرسوم المتحركة في CSS لتحريك العناصر على الويب.
قد يكون إنشاء رسوم متحركة ذات مغزى وجميلة CSS أمرًا معقدًا ويستغرق وقتًا طويلاً ، ولكن لحسن الحظ ، هناك الكثير من الموارد للمساعدة في بدء العملية الإبداعية الخاصة بك. تحتوي هذه المجموعة على أفضل موارد مكتبة الرسوم المتحركة في CSS.
اختر واحدًا يناسب مشروعك وابدأ فورًا.يمكنك استخدام أي منها كنقطة بداية لإنشاء علامتك التجارية المخصصة. هناك أيضًا بعض الصفحات والاختصارات المفيدة لمساعدتك على التعلم.
1.Animista
Animista هو نوع من البيئة حيث يمكنك تحرير وتشغيل مجموعة من الرسوم المتحركة مسبقة الصنع CSS. ثم انسخ الكود الذي تريد استخدامه في مشاريعك.
بدأ Animista كمشروع جانبي للتطوير المتكامل لـ Ana Travas ، والذي لا يزال قيد التطوير.
2.CSS3 Animation Cheat Sheet
يعتبر CSS3 Animation Cheat Sheet مشروعًا مفيدًا يوفر مجموعة من الرسوم المتحركة المعدة مسبقًا للاستخدام في مشروعات الويب.
للبدء ، هناك تعليمات محددة لمساعدتك ، ولكن في الأساس ، تحتاج فقط إلى إضافة ملف النمط المطلوب إلى موقع الويب الخاص بك وفئات CSS سابقة الإنشاء لتحريك العناصر التي تريدها.
يستخدم هذا المشروع keyframe CSS3 مما يعني أنه لا داعي للقلق بشأن موضع العناصر التي يتم تحريكها.
في ما يلي ثالث مورد من بين قائمة 12 مورد رائع للرسوم المتحركة في CSS
3.Animate.css
تحتوي هذه المكتبة على حوالي 77 رسمًا متحركًا ، تم إنشاؤها جميعًا في CSS وهي جاهزة للاستخدام. ما عليك سوى إضافة الملف CSS الخاص بهذه المكتبة إلى مشروعك. في هذه الحالة ، عند إضافة فئات إلى عنصر ما ، تحدث الحركة.
يعمل هذا أيضًا بشكل جيد عند إضافة فئات إلى العناصر باستخدام JavaScript. حجم ملف هذه المكتبة صغير جدًا عند ضغطه.
ولكن إذا كنت لا ترغب في تحميل كل شيء على موقعك ، فلا يزال هذا المشروع مصدرًا رائعًا للإلهام والمساعدة. Animate.css تم جمعه بواسطة Dan Eden.
توانید آین کتابخانه تقریبا هر انیمیشنی از CSS که شما می توانید به آن نیاز داشته باشید ، از اصول (bounce، fade in). استخدم القائمة المنسدلة في الصفحة الرئيسية لهذه المكتبة لمشاهدة عناوين كل نمط من الأنماط المختلفة.
4.Hover.css
مثل Animate.css ، تحتوي مكتبة Hover.css أيضًا على مجموعة من تأثيرات CSS التي يمكنك استخدامها في مشاريعك.
تم إنشاء هذه المكتبة خصيصًا للرسوم المتحركة للأزرار التي تظهر على الشاشة.
يمكن تكييف هذه المكتبة لأي مشروع تقريبًا. تحتوي مكتبة Hover.css على كل الرسوم المتحركة التي قد تحتاجها للتفاعل مع عنصر.
في ما يلي خامس مورد من بين قائمة 12 مورد رائع للرسوم المتحركة في CSS
5.CSShake
CSShake عبارة عن مكتبة من الرسوم المتحركة CSS المخصصة لنقل العناصر.
تحتوي هذه المكتبة على عدد من الفئات التي يمكنك إضافتها إلى عناصر مختلفة.
تستخدم هذه المكتبة keyframe والسمة transform لإنشاء رسوم متحركة تبدو أحيانًا مجنونة.
ومع ذلك ، لا يمكن تجاهل هذه المكتبة.
حاليًا ، توجد أيضًا مكتبة Reshake ، والتي تُستخدم لتطبيق الرسوم المتحركة على مكونات React.
6.Obnoxious.css
Obnoxious.css تمامًا كما يوحي الاسم أنه تم إنشاؤه بواسطة Tim Holman. تستكشف هذه المكتبة ما هو ممكن مع الرسوم المتحركة CSS ، ولكن في الغالب ما لا يجب عليك فعله مع الرسوم المتحركة CSS. بينما يتم تقديمه كمكتبة للرسوم المتحركة ، إلا أنه مصمم في الغالب لعرض الرسوم المتحركة.
7.Replainless.CSS
Replainless.css هي مكتبة رسوم متحركة CSS صغيرة وخفيفة الوزن تركز على إنشاء رسوم متحركة لا تسبب تغيرات في اللون من متصفحات مختلفة (طالما يتم استخدامها بشكل صحيح).
هذه الرسوم المتحركة سريعة للغاية ومفيدة!
8. Animate Plus
هذه المكتبة مناسبة جدًا لمواقع الجوال. اكتسبت Animate Plus الكثير من الشعبية بسبب جمالها وسحرها. قام Benjamin Dakke ، أحد العقول المدبرة لهذه المكتبة ، بإنشاء مكتبة متحركة CSS و SVG تتميز بأداء رائع وهي مناسبة بشكل خاص للجوال.
في ما يلي تاسع مورد من بين قائمة 12 مورد رائع للرسوم المتحركة في CSS
9. Motion UI
تعد الرسوم المتحركة القوية مثل Move UI أدوات مفيدة في CSS. تسهل هذه الأداة ، التي لها تنسيق الملف Sass ، تطبيق الرسوم المتحركة المخصصة على واجهة المستخدم الخاصة بك. هذه الأداة قوية جدا. يمكنك إنشاء الرسوم المتحركة وتخصيصها لتلبية احتياجاتك ، ثم الاتصال بها باستخدام JavaScript.
10.BounceJS
إذا كنت تريد إنشاء مكتبة من الرسوم المتحركة لنفسك ، فإن BounceJS هي أداة مفيدة لك. يحتوي هذا الموقع على مجموعة من القوالب المعدة مسبقًا والتي يمكن أن تكون مفيدة جدًا لنا
11.GreenSock Animation Platform
GSAP هو إطار عمل JavaScript للرسوم المتحركة. إذا كنت بحاجة إلى إنشاء رسوم متحركة أكثر تعقيدًا (مثل إعلانات البانر أو الصور البطولية) ، فإن GSAP بها مجموعة من الأدوات التي من شأنها تبسيط عملك. إذا كنت تريد تجاوز الرسوم المتحركة في CSS ، فهذا الإطار مصمم لك.
12.Easing functions cheatsheet
تحدد وظائف التوقيت مقدار التغييرات بمرور الوقت ، والتي تلعب دورًا حاسمًا في عالم الرسوم المتحركة. سيساعدك هذا الموقع في اختيار خيار مناسب للرسوم المتحركة الخاصة بك.
أخيرا نتمنى أن يكون درس 12 مورد رائع للرسوم المتحركة في CSS
قد أفادكم
يسعدنا إثراء الموضوع من خلال تعليقاتكم و استفساراتكم المفيدة
مع تحيات موقع hdegy