CSSkeyframes القاعدة _
مثال
اجعل عنصر يتحرك تدريجيًا بمقدار 200 بكسل لأسفل:
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
@keyframesتحدد القاعدة رمز الحركة .
يتم إنشاء الرسم المتحرك بالتغيير التدريجي من مجموعة أنماط CSS إلى أخرى.
أثناء الرسم المتحرك ، يمكنك تغيير مجموعة أنماط CSS عدة مرات.
حدد وقت حدوث تغيير النمط بالنسبة المئوية ، أو بالكلمات الرئيسية "من" و "إلى" ، والتي تكون مماثلة لـ 0٪ و 100٪. 0٪ هي بداية الحركة ، و 100٪ عند اكتمال الحركة.
نصيحة: للحصول على أفضل دعم للمتصفح ، يجب عليك دائمًا تحديد كل من المحددات 0٪ و 100٪.
ملاحظة: استخدم خصائص الرسوم المتحركة للتحكم في مظهر الرسم المتحرك وأيضًا لربط الرسم المتحرك بالمحددات.
ملاحظة: يتم تجاهل القاعدة المهمة في الإطار الرئيسي (انظر المثال الأخير في هذه الصفحة).
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم القاعدة بشكل كامل.
تحدد الأرقام المتبوعة بـ -webkit- أو -moz- أو -o- الإصدار الأول الذي يعمل مع بادئة.
| Property | |||||
|---|---|---|---|---|---|
| @keyframes | 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- |
بنية CSS
@keyframes animationname {keyframes-selector {css-styles;}}
قيم الملكية
| Value | Description |
|---|---|
| animationname | Required. Defines the name of the animation. |
| keyframes-selector | Required. Percentage of the animation duration. Legal values: 0-100% Note: You can have many keyframes-selectors in one animation. |
| css-styles | Required. One or more legal CSS style properties |
مزيد من الأمثلة
مثال
أضف العديد من محددات الإطارات الرئيسية في رسم متحرك واحد:
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
مثال
قم بتغيير العديد من أنماط CSS في رسم متحرك واحد:
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
مثال
العديد من محددات الإطارات الرئيسية مع العديد من أنماط 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;}
}
مثال
ملاحظة: يتم تجاهل القاعدة المهمة في الإطار الرئيسي:
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* ignored
*/
to {top: 200px;}
}