مثال
تحريك شيء يتحرك من مكان إلى آخر، وأنها تبقى هناك:
div {
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
} انها محاولة لنفسك » تعريف واستخدام
تحدد الخاصية الرسوم المتحركة ملء وضع أسلوب للعنصر عندما لا يلعب الرسوم المتحركة (when it is finished, or when it has a delay) .
افتراضيا، والرسوم المتحركة CSS لا تؤثر على عنصر حتى أول keyframe "played" ، ثم توقف مرة واحدة اكتمال الإطار الرئيسي الماضي. الخاصية الرسوم المتحركة ملء وضع يمكن تجاوز هذا السلوك.
| القيمة الافتراضية: | none |
|---|---|
| وارث: | no |
| Animatable: | no. Read about animatable |
| الإصدار: | CSS3 |
| جافا سكريبت بناء الجملة: | object .style.animationFillMode="forwards" Try it |
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
أرقام تليها -webkit-، -moz-، أو -o- تحدد النسخة الأولى التي عملت مع بادئة.
| خاصية | |||||
|---|---|---|---|---|---|
| animation-fill-mode | 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 4.0 -webkit- | 15.0 -webkit- 12.1 12.0 -o- |
CSS بناء الجملة
animation-fill-mode: none|forwards|backwards|both|initial|inherit;قيم الملكية
| القيمة | وصف |
|---|---|
| none | القيمة الافتراضية. فإن الحركة لا تنطبق أي من الأساليب للعنصر الهدف قبل أو بعد أن يتم تنفيذ |
| forwards | بعد انتهاء الرسوم المتحركة (determined by animation-iteration-count) ، والرسوم المتحركة تنطبق قيم الخاصية للمرة الرسوم المتحركة انتهى |
| backwards | فإن الرسوم المتحركة تنطبق قيم الخصائص المحددة في الإطار الرئيسي الذي يبدأ التكرار الأول للرسوم المتحركة، خلال الفترة التي تحددها الرسوم المتحركة تأخير. هذه إما أن تكون قيم من الإطار الرئيسي (when animation-direction is "normal" or "alternate") أو تلك التي لالإطار الرئيسي (when animation-direction is "reverse" or "alternate-reverse") |
| both | فإن الرسوم المتحركة تتبع القواعد على حد سواء إلى الأمام وإلى الوراء. وهذا يعني أنه سيمدد خصائص الرسوم المتحركة في كلا الاتجاهين |
| initial | تحدد هذه الخاصية إلى قيمته الافتراضية. قرأت عن الأولي |
| inherit | يرث هذه الخاصية من عنصر الأم. قراءة حول وراثة |
صفحات ذات صلة
CSS3 البرنامج التعليمي: CSS3 متحركة
HTML DOM المرجع animationFillMode property