الفرق بين المراجعتين ل"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>

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