مولد حركات CSS

يمكنك إنشاء أنواع متعددة من الحركات مثل الانزلاق والتلاشي والتحجيم والدوران والارتداد والنبض والاهتزاز والانقلاب والتكبير والحركات المخصصة تمامًا. كل نوع يأتي مع معاملات قابلة للتخصيص مثل الاتجاه والمدة ووظائف التوقيت وعدد التكرارات.

انسخ كود CSS المُولَّد وأضفه إلى ورقة الأنماط. ثم طبّق الصنف "animated-element" على أي عنصر HTML تريد تحريكه. يمكنك تشغيل الحركات عند تحميل الصفحة أو التمرير أو النقر أو أي حدث آخر باستخدام JavaScript أو CSS pseudo-classes.

نعم! توفر الأداة تحكمًا كاملًا في توقيت الحركة بما في ذلك المدة والتأخير وعدد التكرارات والاتجاه ووظائف التوقيت. يمكنك الاختيار من بين وظائف التسهيل المحددة مسبقًا أو إنشاء منحنيات cubic-bezier مخصصة.

كل نوع حركة يخلق تأثيرات بصرية مختلفة: Slide يحرك العناصر من اتجاهات محددة، Fade يغير الشفافية، Scale يكبّر/يصغّر العناصر، Rotate يدير العناصر، Bounce يخلق حركة ارتداد، Pulse يخلق تأثيرات تحجيم خفية، Shake يخلق حركة أفقية، Flip يدور في فضاء ثلاثي الأبعاد، و Zoom يخلق تأثيرات تكبير دراماتيكية.

بالتأكيد! يمكنك تعيين الحركات للتشغيل بشكل لا نهائي بالنقر على زر اللانهاية (∞) بجانب عدد التكرارات. يمكنك أيضًا التحكم في الاتجاه بخيارات مثل normal وreverse وalternate وalternate-reverse لإنشاء تأثيرات حلقية سلسة.

اختر "مخصص" من القائمة المنسدلة لنوع الحركة وأدخل قواعد الإطارات الرئيسية الخاصة بك. استخدم بنية CSS keyframes القياسية مثل: "0% { transform: translateX(-100px); } 100% { transform: translateX(0); }" لتحديد خطوات حركتك.

نعم، حركات CSS المُولَّدة متجاوبة وتعمل عبر جميع المتصفحات والأجهزة الحديثة. تستخدم الحركات خصائص CSS3 المدعومة جيدًا والمحسّنة للأداء على الأجهزة المحمولة.

نعم! تتضمن الأداة منطقة معاينة مباشرة حيث يمكنك رؤية كيف ستبدو حركتك بالضبط. انقر على زر "إعادة تشغيل الحركة" لرؤية حركتك أثناء العمل مع جميع إعداداتك المخصصة.

تولّد الأداة CSS كاملًا يشمل قواعد @keyframes وanimation-name وanimation-duration وanimation-delay وanimation-iteration-count وanimation-direction وanimation-timing-function وanimation-fill-mode. جميع الأكواد محسّنة وجاهزة للإنتاج.

رغم أن هذه الأداة تولّد حركات فردية، يمكنك دمج حركات متعددة بإنشاء أسماء إطارات رئيسية مختلفة وتطبيقها على عناصر مختلفة أو في أوقات مختلفة. يمكنك أيضًا استخدام تأخيرات الحركة لإنشاء تأثيرات متسلسلة.

نعم، يستخدم الكود المُولَّد خصائص CSS3 القياسية المدعومة من قِبَل جميع المتصفحات الحديثة مثل Chrome وFirefox وSafari وEdge. يتبع الكود معايير الويب الحالية وأفضل الممارسات لتحقيق أقصى توافق.

للحصول على أفضل أداء، استخدم التحويلات (translate وscale وrotate) وتغييرات الشفافية بدلًا من تحريك خصائص التخطيط. تولّد الأداة حركات محسّنة، ويمكنك تحسين الأداء أكثر باستخدام مدد أقصر وتقليل عدد التكرارات.