أحدث البرامج التعليمية وتطوير الشبكة
 

Style animationFillMode Property

<كائن نمط

مثال

تغيير الخاصية animationFillMode ل <div> العنصر:

document.getElementById("myDIV").style.animationFillMode = "forwards";
انها محاولة لنفسك »

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

تحدد الخاصية animationFillMode ما سيتم تطبيق الأساليب لعنصر عندما لا يلعب الرسوم المتحركة (when it is finished, or when it has a "delay") .

افتراضيا، والرسوم المتحركة CSS لن يؤثر على عنصر كنت موحية حتى أول keyframe "played" ، ثم توقف مرة واحدة تؤثر على اكتمال الإطار الرئيسي الماضي. الخاصية animationFillMode يمكن تجاوز هذا السلوك.


دعم المتصفح

الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.

أرقام تليها غادة عادل تحدد النسخة الأولى التي عملت مع بادئة.

خاصية
animationFillMode 43.0 غير معتمد 16.0
5.0 غادة عادل
غير معتمد 30.0

بناء الجملة

إعادة الممتلكات animationFillMode:

object .style.animationFillMode

تعيين الخاصية animationFillMode:

object .style.animationFillMode="none|forwards|backwards|both|initial|inherit"

قيم الممتلكات

القيمة وصف
none القيمة الافتراضية. فإن الحركة لا تنطبق أي من الأساليب إلى الهدف قبل أو بعد أن يتم تنفيذ
forwards بعد انتهاء الرسوم المتحركة (determined by animation-iteration-count) ، والرسوم المتحركة تنطبق قيم الخاصية للمرة الرسوم المتحركة انتهى
backwards فإن الرسوم المتحركة تنطبق قيم الخصائص المحددة في الإطار الرئيسي التي ستبدأ التكرار الأول للرسوم المتحركة، وخلال المدة المحددة من قبل الحركة التأخير. هذه إما أن تكون قيم من الإطار الرئيسي (when animation-direction is "normal" or "alternate") أو تلك التي لالإطار الرئيسي (when animationDirection is "reverse" or "alternate-reverse")
both فإن الرسوم المتحركة تتبع القواعد على حد سواء إلى الأمام وإلى الوراء. وهذا يعني أنه سيمدد خصائص الرسوم المتحركة في كلا الاتجاهين
initial تحدد هذه الخاصية إلى قيمته الافتراضية. قرأت عن الأولي
inherit يرث هذه الخاصية من عنصر الأم. قراءة حول وراثة

تفاصيل تقنية

القيمة الافتراضية: لا شيء
قيمة الإرجاع: A سلسلة، تمثل الممتلكات الرسوم المتحركة ملء وضع عنصر
صفحة CSS CSS3

صفحات ذات صلة

CSS المرجع animation-fill-mode property


<كائن نمط