عرض مصدر CSS/animation-fill-mode

<noinclude>{{DISPLAYTITLE:الخاصية <code>animation-fill-mode</code>}}</noinclude>
الخاصية <code>animation-fill-mode</code> في CSS تُحدِّد كيف يجب أن تُطبِّق حركات CSS قيمَ الخاصيات إلى العنصر قبل وبعد تنفيذ الحركة.  

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>none</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.
|}

من الشائع استخدام الخاصية المختصرة <code>[[CSS/animation|animation]]</code> لضبط جميع خاصيات الحركات بآنٍ واحد.<nowiki/> <syntaxhighlight lang="css">
/* قيمة واحدة */
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;
</syntaxhighlight>

== أمثلة ==
يمكنك أن تلاحظ أثر الخاصية <code>animation-fill-mode</code> في المثال الآتي، الذي سيؤدي إلى إبقاء الحالة النهائية للعنصر بعد انتهاء الحركة:<syntaxhighlight lang="html">
<p>حرك الماوس فوق المربع الرمادي</p>
<div class="demo">
  <div class="grows">هذا ينمو فقط</div>
  <div class="growsandstays">هذا ينمو ويبقى كبيراً</div>
</div>

</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="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;
}
</syntaxhighlight>

== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|4.0 (مع السابقة <code>-webkit-</code>)
43.0
|5.0 (مع السابقة <code>-moz-</code>)
16.0
|10
|15.0 (مع السابقة <code>-webkit-</code>)
30.0
|5.1 (مع السابقة <code>-webkit-</code>)
9.0
|}
== البنية العامة ==
تقبل الخاصية <code>animation-fill-mode</code> قيمةً واحدةً أو أكثر.

=== <code>none</code> ===
لن تُطبِّق الحركة أيّة أنماط على العنصر عند عدم تنفيذها، وسيُعرَض العنصر باستخدام قواعد CSS المُطبَّقة عليه، وهذه هي القيمة الافتراضية.

===  <code>forwards</code> ===
سيحافظ العنصر على القيم التي يضبطها آخر إطار مفتاحي ([[CSS/@keyframes|keyframe]]) تم تنفيذه في الحركة، وهذا الإطار يختلف حسب  الخاصية <code>[[CSS/animation-direction|animation-direction]]</code> و <code>[[CSS/animation-iteration-count|animation-iteration-count]]</code>:
{| class="wikitable"
![[CSS/animation-direction|animation-direction]]
![[CSS/animation-iteration-count|animation-iteration-count]]
!آخر إطار مفتاحي
|-
|<code>normal</code>
|زوجي أو فردي
|<code>100%</code> أو <code>to</code>
|-
|<code>reverse</code>
|زوجي أو فردي
|<code>0%</code> أو <code>from</code>
|-
|<code>alternate</code>
|زوجي
|<code>0%</code> أو <code>from</code>
|-
|<code>alternate</code>
|فردي
|<code>100%</code> أو <code>to</code>
|-
|<code>alternate-reverse</code>
|زوجي
|<code>100%</code> أو <code>to</code>
|-
|<code>alternate-reverse</code>
|فردي
|<code>0%</code> أو <code>from</code>
|}

=== <code>backwards</code> ===
ستُطبِّق الحركة القيم الموجودة في أوّل إطار مفتاحي ([[CSS/@keyframes|keyframe]]) على العنصر في أسرع وقت ممكن، وستحافظ على هذه القيم خلال فترة <code>[[CSS/animation-delay|animation-delay]]</code>، لاحظ أنَّ قيمة أوّل إطار مفتاحي تختلف حسب الخاصية <code>[[CSS/animation-direction|animation-direction]]</code>:
{| class="wikitable"
![[CSS/animation-direction|animation-direction]]
!أوّل إطار مفتاحي
|-
|<code>normal</code> أو <code>alternate</code>
|<code>0%</code> أو <code>from</code>
|-
|<code>reverse</code> أو <code>alternate-reverse</code>
|<code>100%</code> أو <code>to</code>
|}

===  both ===
ستتبع الحركات قواعد  <code>forwards</code> و <code>backwards</code> معًا.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
animation-fill-mode: <single-animation-fill-mode>#;

</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<single-animation-fill-mode> = none | forwards | backwards | both

</syntaxhighlight>

==  انظر أيضًا ==
* صفحة الخاصية <code>[[CSS/animation|animation]]</code> والخاصيات الفرعية التي تضبطها هذه الخاصية وهي <code>[[CSS/animation-name|animation-name]]</code> و <code>[[CSS/animation-duration|animation-duration]]</code> و <code>[[CSS/animation-timing-function|animation-timing-function]]</code> و <code>[[CSS/animation-delay|animation-delay]]</code> و <code>[[CSS/animation-iteration-count|animation-iteration-count]]</code> و <code>[[CSS/animation-direction|animation-direction]]</code> و<code>[[CSS/animation-play-state|animation-play-state]]</code>.

== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-animations/#animation-fill-mode CSS Animations]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Animations|{{SUBPAGENAME}}]]