الفرق بين المراجعتين لصفحة: «CSS/animation-name»
< CSS
لا ملخص تعديل |
لا ملخص تعديل |
||
| (3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 2: | سطر 2: | ||
الخاصية <code>animation-name</code> في CSS تستعمل لتحديد أسماء الحركات التي ستُطبَّق على العنصر، وكل اسم يجب أن يُشير إلى قاعدة <code>[[CSS/@keyframes|@keyframes]]</code> التي تُعرِّف قيم الخاصيات اللازمة للحركة. | الخاصية <code>animation-name</code> في CSS تستعمل لتحديد أسماء الحركات التي ستُطبَّق على العنصر، وكل اسم يجب أن يُشير إلى قاعدة <code>[[CSS/@keyframes|@keyframes]]</code> التي تُعرِّف قيم الخاصيات اللازمة للحركة. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 35: | سطر 20: | ||
|كما حُدِّدَت. | |كما حُدِّدَت. | ||
|} | |} | ||
من الشائع استخدام الخاصية المختصرة <code>[[CSS/animation|animation]]</code> لضبط جميع خاصيات الحركات بآنٍ واحد.<nowiki/><syntaxhighlight lang="css"> | |||
/* حركة واحدة */ | |||
animation-name: none; | |||
animation-name: test_05; | |||
animation-name: -specific; | |||
animation-name: sliding-vertically; | |||
/* عدِّة حركات */ | |||
animation-name: test1, animation4; | |||
animation-name: none, -moz-specific, sliding; | |||
/* القيم العامة */ | |||
animation-name: initial | |||
animation-name: inherit | |||
animation-name: unset | |||
</syntaxhighlight> | |||
== دعم المتصفحات == | == دعم المتصفحات == | ||
| سطر 57: | سطر 59: | ||
|} | |} | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>animation-name</code> قيمةً واحدةً أو أكثر تُشير إلى قاعدة <code>[[CSS/@keyframes|@keyframes]]</code> التي تُعرِّف | تقبل الخاصية <code>animation-name</code> قيمةً واحدةً أو أكثر تُشير إلى قاعدة <code>[[CSS/@keyframes|@keyframes]]</code> التي تُعرِّف الخاصيات اللازمة للحركة. | ||
=== | === <code>none</code> === | ||
كلمة محجوزة خاصة تعني أنَّه لا توجد إطارات مفتاحية للحركة، وتستعمل لتعطيل الحركة. | كلمة محجوزة خاصة تعني أنَّه لا توجد إطارات مفتاحية للحركة، وتستعمل لتعطيل الحركة. | ||
=== | === <code><keyframes-name></code> === | ||
أسماء تُشير إلى قواعد <code>[[CSS/@keyframes|@keyframes]]</code> التي تُعرِّف | أسماء تُشير إلى قواعد <code>[[CSS/@keyframes|@keyframes]]</code> التي تُعرِّف الخاصيات اللازمة للحركة. يمكن أن تكون من نوع البيانات <code>[[CSS/custom-ident|<custom-ident>]]</code> أو سلاسل نصية <code>[[CSS/string|<string>]]</code>. | ||
=== البنية الرسمية === | === البنية الرسمية === | ||
| سطر 73: | سطر 75: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | |||
* صفحة الخاصية <code>[[CSS/animation|animation]]</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-fill-mode|animation-fill-mode]]</code> و<code>[[CSS/animation-play-state|animation-play-state]]</code>. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مسودة [https://drafts.csswg.org/css-animations/#animation-name CSS Animations]. | * مسودة [https://drafts.csswg.org/css-animations/#animation-name CSS Animations]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Animations]] | [[تصنيف:CSS Animations|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 08:30، 12 أغسطس 2018
الخاصية animation-name في CSS تستعمل لتحديد أسماء الحركات التي ستُطبَّق على العنصر، وكل اسم يجب أن يُشير إلى قاعدة @keyframes التي تُعرِّف قيم الخاصيات اللازمة للحركة.
بطاقة الخاصية
| القيمة الابتدائية | none
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
من الشائع استخدام الخاصية المختصرة animation لضبط جميع خاصيات الحركات بآنٍ واحد.
/* حركة واحدة */
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;
/* عدِّة حركات */
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;
/* القيم العامة */
animation-name: initial
animation-name: inherit
animation-name: unset
دعم المتصفحات
| الميزة | 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-name قيمةً واحدةً أو أكثر تُشير إلى قاعدة @keyframes التي تُعرِّف الخاصيات اللازمة للحركة.
none
كلمة محجوزة خاصة تعني أنَّه لا توجد إطارات مفتاحية للحركة، وتستعمل لتعطيل الحركة.
<keyframes-name>
أسماء تُشير إلى قواعد @keyframes التي تُعرِّف الخاصيات اللازمة للحركة. يمكن أن تكون من نوع البيانات <custom-ident> أو سلاسل نصية <string>.
البنية الرسمية
animation-name: [ none | <keyframes-name> ]#;
حيث:
<keyframes-name> = <custom-ident> | <string>
انظر أيضًا
- صفحة الخاصية
animationوالخاصيات الفرعية التي تضبطها هذه الخاصية وهيanimation-durationوanimation-timing-functionوanimation-delayوanimation-iteration-countوanimation-directionوanimation-fill-modeوanimation-play-state.
مصادر ومواصفات
- مسودة CSS Animations.