نمط الرسوم المتحركة
مثال
تغيير خاصية animationFillMode لعنصر <div>:
document.getElementById("myDIV").style.animationFillMode = "forwards";
التعريف والاستخدام
تحدد الخاصية animationFillMode الأنماط التي سيتم تطبيقها على العنصر عندما لا يتم تشغيل الرسم المتحرك (عند الانتهاء ، أو عندما يكون هناك "تأخير").
بشكل افتراضي ، لن تؤثر الرسوم المتحركة لـ CSS على العنصر الذي تقوم بتحريكه حتى يتم "تشغيل" إطار المفتاح الأول ، ثم يتوقف عن التأثير عليه بمجرد اكتمال آخر إطار رئيسي. يمكن أن تتجاوز خاصية animationFillMode هذا السلوك.
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
تحدد الأرقام التي يتبعها Moz الإصدار الأول الذي يعمل بالبادئة.
Property | |||||
---|---|---|---|---|---|
animationFillMode | 43.0 | 79.0 | 16.0 5.0 Moz |
9.0 | 30.0 |
بناء الجملة
قم بإرجاع خاصية AnimationFillMode:
object.style.animationFillMode
قم بتعيين خاصية AnimationFillMode:
object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
قيم الملكية
Value | Description |
---|---|
none | Default value. The animation will not apply any styles to the target before or after it is executing |
forwards | After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended |
backwards | The animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by animation-delay. These are either the values of the from keyframe (when animation-direction is "normal" or "alternate") or those of the to keyframe (when animationDirection is "reverse" or "alternate-reverse") |
both | The animation will follow the rules for both forwards and backwards. That is, it will extend the animation properties in both directions |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
تفاصيل تقنية
القيمة الافتراضية: | لا أحد |
---|---|
قيمة الإرجاع: | سلسلة ، تمثل خاصية وضع تعبئة الرسوم المتحركة لعنصر |
إصدار CSS | CSS3 |
الصفحات ذات الصلة
مرجع CSS: خاصية وضع تعبئة الرسوم المتحركة