مثال
جعل عنصر تتحرك تدريجيا 200px أسفل:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
انها محاولة لنفسك » أكثر "Try it Yourself" الأمثلة أدناه.
تعريف واستخدام
تحدد القاعدةkeyframes رمز الرسوم المتحركة.
يتم إنشاء الرسوم المتحركة عن طريق تغيير تدريجيا من مجموعة واحدة من أساليب المغلق إلى آخر.
خلال الرسوم المتحركة، يمكنك تغيير مجموعة الأنماط CSS عدة مرات.
تحديد عند تغيير نمط سيحدث في المئة، أو مع الكلمات الرئيسية "from" و "to" ، والذي هو نفسه ك 0٪ و 100٪. 0٪ هي بداية للرسوم المتحركة، و 100٪ هو عندما الرسوم المتحركة كاملة.
نصيحة: للحصول على أفضل دعم المتصفح، يجب أن تحدد دائما على حد سواء 0٪ و 100٪ محددات.
Note: استخدام خصائص حيوية للتحكم في مظهر من الرسوم المتحركة، وأيضا لربط الرسوم المتحركة لمحددات.
دعم المتصفح
الأرقام في الجدول تحدد أول إصدار المستعرض الذي يدعم بشكل كامل القاعدة.
أرقام تليها -webkit-، -moz- أو -o- تحدد النسخة الأولى التي عملت مع بادئة.
| خاصية | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | تسعة 4.0 -webkit- | 30.0 15.0 -webkit- 12.0 -o- |
CSS بناء الجملة
@keyframesanimationname {keyframes-selector {css-styles;}}قيم الملكية
| القيمة | وصف |
|---|---|
| animationname | مطلوب. يحدد اسم للرسوم المتحركة. |
| keyframes-selector | مطلوب. النسبة المئوية لمدة الرسوم المتحركة. القيم القانونية: 0-100٪ Note: هل يمكن أن يكون العديد من إطارات مفتاحية-محددات في الرسوم المتحركة واحد. |
| css-styles | مطلوب. واحد أو أكثر من الخصائص النمط المغلق القانونية |
مزيد من الأمثلة
مثال
إضافة العديد من محددات الإطار الرئيسي في الرسوم المتحركة واحد:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
انها محاولة لنفسك » مثال
تغيير العديد من أساليب المغلق في الرسوم المتحركة واحد:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
انها محاولة لنفسك » مثال
العديد من محددات الإطار الرئيسي مع العديد من الأساليب CSS:
/* Chrome, Safari, Opera */
@-webkit-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;}
}
/* Standard syntax */
@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;}
}
انها محاولة لنفسك » صفحات ذات صلة
CSS3 البرنامج التعليمي: CSS3 متحركة