الفرق بين المراجعتين لصفحة: «CSS/animation-name»
< CSS
لا ملخص تعديل |
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
||
| سطر 76: | سطر 76: | ||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مسودة [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}}]] | ||
مراجعة 15:36، 28 يناير 2018
الخاصية animation-name في CSS تستعمل لتحديد أسماء الحركات التي ستُطبَّق على العنصر، وكل اسم يجب أن يُشير إلى قاعدة @keyframes التي تُعرِّف قيم الخاصيات اللازمة للحركة.
من الشائع استخدام الخاصية المختصرة 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
| القيمة الابتدائية | none
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
دعم المتصفحات
| الميزة | 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>
مصادر ومواصفات
- مسودة CSS Animations.