مثال
تغيير الخاصية 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
<كائن نمط