الخاصية animation-fill-mode

الخاصية animation-fill-mode في CSS تُحدِّد كيف يجب أن تُطبِّق حركات CSS قيمَ الخاصيات إلى العنصر قبل وبعد تنفيذ الحركة.

من الشائع استخدام الخاصية المختصرة 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;

القيمة الابتدائية	none
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

أمثلة

يمكنك أن تلاحظ أثر الخاصية 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.