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

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

الخاصية 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

 انظر أيضًا

مصادر ومواصفات