CSS/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>حرك الماوس فوق المربع الرمادي</p>
<div class="demo">
  <div class="grows">هذا ينمو فقط</div>
  <div class="growsandstays">هذا ينمو ويبقى كبيراً</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.