سمة Style animationFillMode

التعريف والاستخدام

animationFillMode يحدد السمة النمط الذي سيتم تطبيقه على العنصر عند عدم العرض التفاعلي (عند انتهاء العرض التفاعلي أو عند التأخير).

بالتشخيص، لا يؤثر العرض التفاعلي للCSS بشكل افتراضي على العنصر الذي يتم فيه العرض التفاعلي قبل أن يبدأ العرض التفاعلي الأولي، ثم يتوقف التأثير بعد أن يتم العرض التفاعلي الأخير.animationFillMode يمكن للسمة تغيير هذا السلوك.

مثال

تغيير سمة animationFillMode للعنصر <div>:

document.getElementById("myDIV").style.animationFillMode = "forwards";

تجربة شخصية

النحو

إرجاع سمة animationFillMode:

الجسم.style.animationFillMode

إعداد سمة animationFillMode:

الجسم.style.animationFillMode = "لا شيء|forwards|backwards|كلاهما|القيمة الافتراضية|التوريث"

قيمة السمة

القيمة الوصف
لا شيء القيمة الافتراضية. لن يتم تطبيق أي نمط على الهدف قبل أو بعد تنفيذ العرض التفاعلي.
forwards بعد انتهاء العرض التفاعلي (يحدده animation-iteration-count)، سيطبق العرض التفاعلي هذا السمة عند انتهاء العرض التفاعلي.
backwards

في فترة time الذي تم تعريفه من قبل animation-delay، سيطبق العرض التفاعلي القيم المحددة في النقاط الرئيسية، التي ستبدأ من أول تكرار للعرض التفاعلي.

هذه هي القيم من النقاط الرئيسية (عندما يكون اتجاه العرض التفاعلي "normal" أو "متبادل" أو "متبادل عكسي" أو "متبادل عكسي مزدوج").
كلاهما سيتبع العرض التفاعلي القواعد الأمامية والخلفية. أي أنة سيوسع خصائص العرض التفاعلي في كلا الاتجاهين.
القيمة الافتراضية أعد هذا السمة إلى قيمته الافتراضية. يرجى الرجوع إلى القيمة الافتراضية.
التوريث ينتقل إلى هذا السمة من العنصر الأب. يرجى الرجوع إلى التوريث.

تفاصيل التقنية

القيمة الافتراضية: لا شيء
القيمة المعدة: السلسلة، تمثل خصائص animation-fill-mode.
إصدار CSS: CSS3

دعم المتصفحات

animationFillMode هي خاصية CSS3 (1999).

جميع المتصفحات يدعمونه بشكل كامل:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
يدعم يدعم يدعم يدعم يدعم 11

الصفحات ذات الصلة

CSS المرجع:خصائص animation-fill-mode