الرسوم المتحركة CSS3

الرسوم المتحركة CSS3

CSS3، يمكننا خلق الرسوم المتحركة التي يمكن أن تحل محل العديد من صفحات الصور المتحركة، والرسوم المتحركة فلاش، و JavaScripts.

CSS3keyframes قواعد

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

keyframes القاعدة لإنشاء الرسوم المتحركة. تحديد نمط CSS وسوف الرسوم المتحركة تتغير تدريجيا إلى النمط الجديد من النمط الحالي ضمن القواعدkeyframes.

دعم المتصفح

الأرقام الواردة في الجدول تمثل أول متصفح لدعم رقم الإصدار للممتلكات.

مباشرة بعد -webkit- الرقمية، -ms- أو -moz- قبل في دعم البادئة السمة الأولى رقم إصدار المتصفح.

أمثلة

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

الرسوم المتحركة CSS3

عند إنشاءkeyframes الرسوم المتحركة، وتربطها محدد، وإلا فإن الحركة لن يكون له أي تأثير.

تحديد اثنين على الأقل لا بد الملكية CSS3 الرسوم المتحركة لمحدد:

• وهي تحدد اسم الرسوم المتحركة
• عندما سلفا طول الرسوم المتحركة

أمثلة

و"myfirst" الرسوم المتحركة مرتبطة شعبة مدة العنصر: 5 ثواني:

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

محاولة »

ملاحظة: يجب تحديد مدة للرسوم المتحركة والرسوم المتحركة الاسم.إذا قمت بحذف فإن مدة الرسوم المتحركة لا تعمل لأن القيمة الافتراضية هي 0.

ما هي CSS3 الرسوم المتحركة؟

عنصر الرسوم المتحركة هو إجراء تغيير تدريجي من نمط واحد لتأثير نمط آخر.

يمكنك تغيير العديد من الأساليب عدة مرات.

الرجاء استخدام النسبة المئوية للتغير في الوقت المحدد، أو الكلمة الرئيسية "من" و "إلى"، أي ما يعادل 0٪ و 100٪.

0٪ هي بداية للرسوم المتحركة، والرسوم المتحركة هو 100٪ كاملة.

للحصول على أفضل دعم المتصفح، يجب أن تحدد دائما 0٪ و 100٪ لمحدد.

أمثلة

تغيير لون الخلفية عند الرسوم المتحركة هو 25٪ و 50٪ و 100٪ كاملة عندما تغير الرسوم المتحركة مرة أخرى:

@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

محاولة »

أمثلة

تغيير لون الخلفية، والمكان:

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

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

محاولة »

خصائص CSS3 الرسوم المتحركة

يسرد الجدول التالي قواعدkeyframes وجميع خصائص الرسوم المتحركة:

المثالان تعيين كل خصائص الرسوم المتحركة:

أمثلة

تشغيل الرسوم المتحركة myfirst، تعيين كل الصفات:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

محاولة »

أمثلة

الرسوم المتحركة فوق نفسه، ولكن مع قصيرة خصائص الرسوم المتحركة الرسوم المتحركة:

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}

محاولة »