مولد CSS Animation

أنشئ رسوم CSS keyframe المتحركة بصرياً مع معاينة مباشرة. اختر من إعدادات مسبقة مثل bounce وpulse وshake وspin. اضبط المدة والتوقيت والمزيد. انسخ كود CSS. أداة أونلاين مجانية.

معاينة

إعداد مسبق للرسوم المتحركة

المدة

1.0s

دالة التوقيت

التأخير

0.0s

التكرارات

لا نهائي

الاتجاه

وضع الملء

مخرج CSS

مرجع

ما هي رسوم CSS المتحركة؟

رسوم CSS المتحركة تتيح لك تحريك الانتقالات بين قيم خصائص CSS عبر الزمن. تتكون من جزأين: قواعد @keyframes التي تحدد مراحل الرسوم المتحركة، وخاصية animation التي تتحكم في التوقيت والاتجاه والتشغيل.

الإعدادات المسبقة للرسوم المتحركة

تتضمن هذه الأداة إعدادات مسبقة شائعة: bounce (ارتداد عمودي)، pulse (تكبير وتصغير)، shake (اهتزاز أفقي)، spin (دوران 360°)، fadeIn/fadeOut (انتقالات الشفافية)، slideIn/slideOut (انزلاق من الجانب)، swing (دوران البندول) وwobble (اهتزاز غير متماثل).

الخصوصية

جميع عمليات توليد الرسوم المتحركة تتم بنسبة 100% في متصفحك. لا يتم إرسال أي بيانات إلى أي خادم.

← العودة إلى جميع الأدوات