المستخدمة مؤخرًا

    افتح أداة وستظهر هنا.

    مولد حركات CSS

    إنشاء حركات CSS بإطارات رئيسية باستخدام محرر خط زمني بصري

    مشاركة هذه الأداة

    الإبلاغ عن مشكلة

    صف المشكلة دون تضمين مدخلات أو ملفات خاصة.

    ما مدى فائدة هذه الأداة؟

    ما مدى فائدة هذه الأداة؟

    إعدادات الحركة

    حركات جاهزة

    الإطارات المفتاحية

    0% → 100%

    إطار مفتاحي · 0%

    إطار مفتاحي · 100%

    معاينة مباشرة

    معاينة

    شيفرة CSS المولّدة

    @keyframes myAnimation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.animated-element {
  animation-name: myAnimation;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-delay: 0s;
}

    عدّل الإطارات المفتاحية وأعد التشغيل للتحقق من حركتك.

    أمثلة سريعة على التحويلاتtranslateX(100px) / translateY(-50px)rotate(45deg) / rotate(360deg)scale(1.5) / scale(0.5)إمالة أفقية وعمودية: skewX(10deg) / skewY(-5deg)منظور مع دوران حول المحور Y: perspective(400px) rotateY(180deg)

    عن مولد حركات CSS

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

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

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

    التصميم

    أضيفت حديثًا

    كل الأدوات

    إعدادات الخصوصية

    اختر تفضيلاتك للتحليلات والإعلانات والتخصيص. يُبقي التخزين الأساسي ميزات مثل المظهر والأدوات المحفوظة تعمل.

    التخزين الأساسي مفعّل دائمًا.