الفرق بين المراجعتين لصفحة: «CSS/animation-fill-mode»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| (4 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>animation-fill-mode</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>animation-fill-mode</code>}}</noinclude> | ||
الخاصية <code>animation-fill-mode</code> في CSS تُحدِّد كيف يجب أن تُطبِّق حركات CSS قيمَ الخاصيات إلى العنصر قبل وبعد تنفيذ الحركة. | الخاصية <code>animation-fill-mode</code> في CSS تُحدِّد كيف يجب أن تُطبِّق حركات CSS قيمَ الخاصيات إلى العنصر قبل وبعد تنفيذ الحركة. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 35: | سطر 20: | ||
|كما حُدِّدَت. | |كما حُدِّدَت. | ||
|} | |} | ||
من الشائع استخدام الخاصية المختصرة <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"> | يمكنك أن تلاحظ أثر الخاصية <code>animation-fill-mode</code> في المثال الآتي، الذي سيؤدي إلى إبقاء الحالة النهائية للعنصر بعد انتهاء الحركة:<syntaxhighlight lang="html"> | ||
<p> | <p>حرك الماوس فوق المربع الرمادي</p> | ||
<div class="demo"> | <div class="demo"> | ||
<div class="grows"> | <div class="grows">هذا ينمو فقط</div> | ||
<div class="growsandstays"> | <div class="growsandstays">هذا ينمو ويبقى كبيراً</div> | ||
</div> | </div> | ||
| سطر 90: | سطر 92: | ||
تقبل الخاصية <code>animation-fill-mode</code> قيمةً واحدةً أو أكثر. | تقبل الخاصية <code>animation-fill-mode</code> قيمةً واحدةً أو أكثر. | ||
=== | === <code>none</code> === | ||
لن تُطبِّق الحركة أيّة أنماط على العنصر عند عدم تنفيذها، وسيُعرَض العنصر باستخدام قواعد CSS المُطبَّقة عليه، وهذه هي القيمة الافتراضية. | لن تُطبِّق الحركة أيّة أنماط على العنصر عند عدم تنفيذها، وسيُعرَض العنصر باستخدام قواعد CSS المُطبَّقة عليه، وهذه هي القيمة الافتراضية. | ||
=== | === <code>forwards</code> === | ||
سيحافظ العنصر على القيم التي يضبطها آخر إطار مفتاحي ([[CSS/@keyframes|keyframe]]) تم تنفيذه في الحركة، وهذا الإطار يختلف حسب | سيحافظ العنصر على القيم التي يضبطها آخر إطار مفتاحي ([[CSS/@keyframes|keyframe]]) تم تنفيذه في الحركة، وهذا الإطار يختلف حسب الخاصية <code>[[CSS/animation-direction|animation-direction]]</code> و <code>[[CSS/animation-iteration-count|animation-iteration-count]]</code>: | ||
{| class="wikitable" | {| class="wikitable" | ||
![[CSS/animation-direction|animation-direction]] | ![[CSS/animation-direction|animation-direction]] | ||
| سطر 125: | سطر 127: | ||
|} | |} | ||
=== | === <code>backwards</code> === | ||
ستُطبِّق الحركة القيم الموجودة في أوّل إطار مفتاحي ([[CSS/@keyframes|keyframe]]) على العنصر في أسرع وقت ممكن، وستحافظ على هذه القيم خلال فترة <code>[[CSS/animation-delay|animation-delay]]</code>، لاحظ أنَّ قيمة أوّل إطار مفتاحي تختلف حسب | ستُطبِّق الحركة القيم الموجودة في أوّل إطار مفتاحي ([[CSS/@keyframes|keyframe]]) على العنصر في أسرع وقت ممكن، وستحافظ على هذه القيم خلال فترة <code>[[CSS/animation-delay|animation-delay]]</code>، لاحظ أنَّ قيمة أوّل إطار مفتاحي تختلف حسب الخاصية <code>[[CSS/animation-direction|animation-direction]]</code>: | ||
{| class="wikitable" | {| class="wikitable" | ||
![[CSS/animation-direction|animation-direction]] | ![[CSS/animation-direction|animation-direction]] | ||
| سطر 138: | سطر 140: | ||
|} | |} | ||
=== | === both === | ||
ستتبع الحركات قواعد | ستتبع الحركات قواعد <code>forwards</code> و <code>backwards</code> معًا. | ||
=== البنية الرسمية === | === البنية الرسمية === | ||
| سطر 149: | سطر 151: | ||
</syntaxhighlight> | </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>. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
المراجعة الحالية بتاريخ 08:32، 12 أغسطس 2018
الخاصية 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
انظر أيضًا
- صفحة الخاصية
animationوالخاصيات الفرعية التي تضبطها هذه الخاصية وهيanimation-nameوanimation-durationوanimation-timing-functionوanimation-delayوanimation-iteration-countوanimation-directionوanimation-play-state.
مصادر ومواصفات
- مسودة CSS Animations.