الخاصية animation-fill-mode
الخاصية animation-fill-mode في CSS تُحدِّد كيف يجب أن تُطبِّق حركات CSS قيمَ الخاصيات إلى العنصر قبل وبعد تنفيذ الحركة.
بطاقة الخاصية
| القيمة الابتدائية | none
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
من الشائع استخدام الخاصية المختصرة animation لضبط جميع خاصيات الحركات بآنٍ واحد.
/* قيمة واحدة */
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
/* عدِّة قيم */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
/* القيم العامة */
animation-fill-mode: inherit;
animation-fill-mode: initial;
animation-fill-mode: unset;
أمثلة
يمكنك أن تلاحظ أثر الخاصية animation-fill-mode في المثال الآتي، الذي سيؤدي إلى إبقاء الحالة النهائية للعنصر بعد انتهاء الحركة:
<p>Move your mouse over the gray box!</p>
<div class="demo">
<div class="grows">This just grows.</div>
<div class="growsandstays">This grows and stays big.</div>
</div>
شيفرة CSS:
.demo {
border-top: 100px solid #ccc;
height: 300px;
}
@keyframes grow {
0% { font-size: 0; }
100% { font-size: 40px; }
}
.demo:hover .grows {
animation-name: grow;
animation-duration: 3s;
}
.demo:hover .growsandstays {
animation-name: grow;
animation-duration: 3s;
animation-fill-mode: forwards;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 4.0 (مع السابقة -webkit-)
43.0 |
5.0 (مع السابقة -moz-)
16.0 |
10 | 15.0 (مع السابقة -webkit-)
30.0 |
5.1 (مع السابقة -webkit-)
9.0 |
البنية العامة
تقبل الخاصية animation-fill-mode قيمةً واحدةً أو أكثر.
none
لن تُطبِّق الحركة أيّة أنماط على العنصر عند عدم تنفيذها، وسيُعرَض العنصر باستخدام قواعد CSS المُطبَّقة عليه، وهذه هي القيمة الافتراضية.
forwards
سيحافظ العنصر على القيم التي يضبطها آخر إطار مفتاحي (keyframe) تم تنفيذه في الحركة، وهذا الإطار يختلف حسب قيمة الخاصية animation-direction و animation-iteration-count:
| animation-direction | animation-iteration-count | آخر إطار مفتاحي |
|---|---|---|
normal
|
زوجي أو فردي | 100% أو to
|
reverse
|
زوجي أو فردي | 0% أو from
|
alternate
|
زوجي | 0% أو from
|
alternate
|
فردي | 100% أو to
|
alternate-reverse
|
زوجي | 100% أو to
|
alternate-reverse
|
فردي | 0% أو from
|
القيمة backwards
ستُطبِّق الحركة القيم الموجودة في أوّل إطار مفتاحي (keyframe) على العنصر في أسرع وقت ممكن، وستحافظ على هذه القيم خلال فترة animation-delay، لاحظ أنَّ قيمة أوّل إطار مفتاحي تختلف حسب قيمة الخاصية animation-direction:
| animation-direction | أوّل إطار مفتاحي |
|---|---|
normal أو alternate
|
0% أو from
|
reverse أو alternate-reverse
|
100% أو to
|
القيمة both
ستتبع الحركات قواعد القيمتين forwards و backwards معًا.
البنية الرسمية
animation-fill-mode: <single-animation-fill-mode>#;
حيث:
<single-animation-fill-mode> = none | forwards | backwards | both
مصادر ومواصفات
- مسودة CSS Animations.