مُولِد حركة CSS أنشئ animations keyframe في CSS مع تأثيرات مسبقة ووقت قابل للتعديل.
مُولِد حركة CSS
أنشئ animations keyframe في CSS مع تأثيرات مسبقة ووقت قابل للتعديل.
اختر معادلة تحريك
حدد من بين تحريكات القفز، التلاشي، الانزلاق، الدوران، الهزة، النبض، أو اللف.
تخصيص الزمن
عدل المدة، دالة الوقت، التأخير، عدد التكرار، والاتجاه.
انسخ CSS
معاينة العنصر المتحرك ونسخ الإطارات الرئيسية وتحريك CSS.
What Is مُولِد حركة CSS?
مُحَوِّل حركة CSS يساعدك على إنشاء movements حركية قائمة على الإطار الرئيسي مع مكتبة من التأثيرات المسبقة والتعديلات الزمنية الكاملة. تُضيف movements حركية CSS الحياة إلى صفحات الويب عن طريق تحريك العناصر وتغييرها وانتقالها بمرور الوقت. يوفر هذا الأداة سبعة تأثيرات شائعة: القفز، والتلاشي، والانزلاق، والدوران، والهزة، والنبض، والقلب - كل منها مع تعريفات @keyframes الصحيحة. يمكنك تخصيص كل جانب من جوانب الحركة: يتحكم مدة في طول كل دورة، وتحدد دالة الزمن المنحني السرعة، ويضيف التأخير فترة توقف قبل البدء، ويتحدد عدد التكرار بعدد المرات التي يتم لعبها، وتتحكم الاتجاه في ترتيب التشغيل، ويتعرف نمط الملء على حالة العنصر قبل وبعد الحركة. يعرض المعاينة الحية الحركة في العمل.
Why Use مُولِد حركة CSS?
-
سبع معادلات تحريك شائعة جاهزة للاستخدام
-
التحكم الكامل في المدة، دالة الوقت، التأخير، والتكرار
-
ضوابط اتجاه التحريك ووضع الملء
-
يحتوي CSS المتولد على تعريفات @keyframes كاملة
Common Use Cases
تحريكات الدخول
احرك العناصر عند دخولها إلى منطقة العرض لتجارب مستخدم مثيرة.
مؤشرات التحميل
أنشئ حالات تحميل متحركة مع تأثيرات النبض، الدوران، أو القفز.
جذب الانتباه
استخدم الهزة أو النبض لجذب الانتباه إلى العناصر المهمة.
تحولات الصفحة
أضف تحريكات الانزلاق والتلاشي للانتقالات السلسة بين الصفحات أو الأقسام.
Technical Guide
تستخدم movements حركية CSS خاصية animation shorthand مع قواعد @keyframes. تجمع الخاصية movement: animation-name (مرجع لقاعدة @keyframes)، وanimation-duration، وanimation-timing-function (ease، linear، ease-in، ease-out، ease-in-out، أو cubic-bezier مخصصة)، وanimation-delay، وanimation-iteration-count (عدد أو لانهائي)، وanimation-direction (عادي، معكوس، بديل، معكوس-بديل)، وanimation-fill-mode (لا شيء، إلى الأمام، إلى الخلف، كليهما)، وanimation-play-state (جاري التشغيل، مؤجل). تحدد قاعدة @keyframes مراحل الحركة باستخدام النسب المئوية (0% إلى 100%) أو الكلمات الرئيسية from/to. لأداء أفضل، قم بتشغيل movements فقط الخصائص transform وopacity عند الإمكان، لأن هذه يمكن أن تكون معززة بواسطة GPU. تؤدي خصائص أخرى مثل العرض والارتفاع والهامش والحشو إلى إعادة حسابات التصميم. استخدم الخاصية will-change لإعلام المتصفح بالحركات القادمة.
Tips & Best Practices
-
1استخدم animation-fill-mode: both للحفاظ على الحالة النهائية بعد انتهاء التحريك
-
2احرك فقط transform و opacity لأداء معزز بواسطة GPU
-
3أضف استعلام وسائط prefers-reduced-motion للوصول إلى إمكانية الوصول
-
4استخدم اتجاه بديل لتحريكات طبيعية ذهابًا وإيابًا
Related Tools
مُحول دوارات CSS
أنشئ دوارات تحميل وملoaders متحركة مع أساليب قابلة للتخصيص باستخدام CSS.
🎨 CSS & Design
مكان تجريبي لتحويلات CSS
جرب تحويلات CSS بما في ذلك الدوران والتكبير والانحناء والانتقال مع منظور ثلاثي الأبعاد.
🎨 CSS & Design
مُولِد انتقالات CSS
انشئ انتقالات CSS مع خاصية قابلة للتخصيص، مدة، تخفيف، وتأثيرات عند التحويل.
🎨 CSS & Design
SVG إلى خلفية CSS
تشفير رمز SVG كخلفية صورة CSS باستخدام ترميز URI البيانات.
🎨 CSS & DesignFrequently Asked Questions
Q ما الفرق بين التحريك والانتقال?
Q هل يمكنني ربط تحريكات متعددة?
Q كيف أوقف تحريكًا?
Q ماذا يفعل animation-fill-mode؟
Q هل تحريكات CSS قابلة للوصول إلى إمكانية الوصول؟
About This Tool
مُولِد حركة CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.