قاعدة @keyframes CSS

التعريف والاستخدام

من خلال استخدام قاعدة @keyframes، يمكنك إنشاء تحركية.

مبدأ إنشاء التحركية هو، تحويل مجموعة أنماط CSS تدريجيًا إلى مجموعة أخرى.

يمكنك تغيير هذه الأنماط CSS عدة مرات أثناء عملية التحركية.

تحدد الوقت الذي يحدث فيه التغيير بشكل مئوي، أو من خلال الكلمات المفتاحية "من" و"إلى"، وهو ما يعادل 0% و100%.

0% هو وقت بداية التحركية، و100% هو وقت نهاية التحركية.

نصيحة:للحصول على دعم متصفح ممتاز، يجب عليك دائمًا تعريف مسبقًا الخيارات 0% و100%.

نصيحة:استخدم خصائص التحركية للتحكم في مظهر التحركية، وأربط التحركية بالعنصر المحدد.

ملاحظة:!important القاعدة يتم تجاهلها في النقاط الزمنية الرئيسية (يرجى الرجوع إلى المثال الأخير في الصفحة هذه).

يرجى الرجوع إلى:

دليل CSS3:حركة CSS3

مثال

مثال 1

تحريك عنصر div إلى الأسفل بشكل خطي:

@keyframes mymove {
  من {top: 0px;}
  إلى {top: 200px;}
}

جرب بنفسك

مثال 2

إضافة عدة مختارات keyframe في رسوم متحركة واحدة:

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

جرب بنفسك

مثال 3

تغيير عدة خصائص CSS في رسوم متحركة واحدة:

@keyframes mymove {
  0%   {top: 0px; background: red; width: 100px;}
  100% {top: 200px; background: yellow; width: 300px;}
}

جرب بنفسك

مثال 4

مختار keyframe CSS مع عدة أنماط CSS متعددة:

@keyframes mymove {
  0%   {top: 0px; left: 0px; background: red;}
  25%  {top: 0px; left: 100px; background: blue;}
  50%  {top: 100px; left: 100px; background: yellow;}
  75%  {top: 100px; left: 0px; background: green;}
  100% {top: 0px; left: 0px; background: red;}
}

جرب بنفسك

مثال 5

ملاحظة:يُتجاهل قاعدة !important في النقاط الحرجة:

@keyframes myexample {
  من {top: 0px;}
  50%  {top: 100px !important;} /* يُتجاهل في النقاط الحرجة */
  إلى   {top: 200px;}
}

جرب بنفسك

اللغة CSS

@keyframes animationname {keyframes-selector {css-styles;}}

قيمة الخاصية

القيمة الوصف
animationname مطلوب. تحديد اسم الرسوم المتحركة.
keyframes-selector

مطلوب. نسبة زمن التحرك للرسوم المتحركة.

القيم الصحيحة:

  • 0-100%
  • من (مثل 0%)
  • إلى (مثل 100%)
css-styles مطلوب. خصائص النمط CSS صالحة واحدة أو أكثر.

الدعم المتاح للbrowser

Chrome IE / Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-