منشئ حركات CSS
أنشئ حركات CSS keyframe مع معاينة حية وضوابط التوقيت وكود جاهز للاستخدام
حول منشئ حركات CSS
أنشئ حركات CSS keyframe مع معاينة حية وضوابط التوقيت وكود جاهز للاستخدام — كل شيء في المتصفح.
كيفية استخدام منشئ حركات CSS
- 1اختر نوع الحركة: ارتداد أو ظهور/اختفاء تدريجي أو انزلاق للداخل/الخارج أو اهتزاز أو دوران أو نبض.
- 2اضبط المدة والتأخير للتحكم في سرعة الحركة ووقت البدء.
- 3عيّن عدد التكرارات (عدد الحلقات) أو اختر لا نهائي للحركات المستمرة.
- 4اختر الاتجاه (عادي أو عكسي أو متناوب) ودالة التوقيت (ease أو linear أو cubic-bezier).
- 5انقر على 'إعادة التشغيل' لمعاينة الحركة، ثم انسخ مخرجات CSS.
نصائح
- الاتجاه المتناوب ينشئ تأثير ذهاب وإياب طبيعي — مثالي لعناصر واجهة المستخدم الجاذبة للانتباه.
- منحنيات cubic-bezier المخصصة تتيح لك إنشاء تأثيرات تخفيف فريدة تتطابق مع إحساس علامتك التجارية.
- اجعل مدة الحركة أقل من 300 مللي ثانية للتفاعلات الدقيقة و500-1000 مللي ثانية للانتقالات.
المجاني مقابل المدفوع
مجاني: الحركات الأساسية. Starter+: أنواع حركات مميزة.
أدوات ذات صلة
فريق OneKitToolsتم التحديث 2.21.4