CSS3 متحركة
الرسوم المتحركة CSS3 تسمح للرسوم المتحركة لمعظم عناصر HTML دون استخدام جافا سكريبت أو فلاش!
الرسوم المتحركة
دعم المتصفح لصور متحركة
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
أرقام تليها -webkit-, -moz- ، أو -o- تحدد النسخة الأولى التي عملت مع بادئة.
| الملكية | |||||
|---|---|---|---|---|---|
| @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- |
| animation | 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- |
ما هي CSS3 متحركة؟
للرسوم المتحركة يتيح عنصر تغيير تدريجيا من نمط واحد إلى آخر.
يمكنك تغيير العديد من خصائص CSS تريد، العديد من المرات التي تريدها.
لاستخدام CSS3 الرسوم المتحركة، يجب عليك أولا تحديد بعض الإطارات الأساسية للرسوم المتحركة.
عقد إطارات مفتاحية ما الأنماط العنصر سوف يكون في أوقات معينة.
و @keyframes القاعدة
عند تحديد الأنماط CSS داخل @keyframes القاعدة، والرسوم المتحركة يتغير تدريجيا من النمط الحالي لأسلوب جديد في أوقات معينة.
للحصول على الرسوم المتحركة للعمل، يجب ربط الرسوم المتحركة إلى عنصر.
يرتبط المثال التالي "مثال" للرسوم المتحركة ل <div> العنصر. إرادة الرسوم المتحركة يستمر لمدة 4 ثوان، وسوف تتغير تدريجيا لون الخلفية لل <div> عنصر من "الأحمر" إلى "الأصفر":
مثال
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
انها محاولة لنفسك » ملاحظة: إذا كان animation-duration لم يتم تحديد الملكية، والرسوم المتحركة لديها أي تأثير، لأن القيمة الافتراضية هي 0.
في المثال أعلاه التي حددناها عندما النمط سيتغير باستخدام الكلمات الرئيسية "from" و "to" (والذي يمثل 0٪ (بدء) و 100٪ (كاملة)).
ومن الممكن أيضا استخدام في المئة. باستخدام المئة، يمكنك إضافة العديد من التغييرات على غرار ما تشاء.
والمثال التالي تغيير لون الخلفية لل <div> العنصر عندما الرسوم المتحركة هو 25٪ كاملة، 50٪ كاملة، ومرة أخرى عندما الرسوم المتحركة هو 100٪ كاملة:
مثال
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
} انها محاولة لنفسك » والمثال التالي تغيير كل من لون الخلفية وموقف <div> العنصر عندما الرسوم المتحركة هو 25٪ كاملة، 50٪ كاملة، ومرة أخرى عندما الرسوم المتحركة هو 100٪ كاملة:
مثال
/* The animation code */
@keyframes example
{
0% {background-color: red; left:0px; top:0px;}
25% {background-color: yellow; left:200px; top:0px;}
50% {background-color: blue; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
} انها محاولة لنفسك » تأخير على الرسوم المتحركة
و animation-delay تحدد الخاصية تأخير لبدء للرسوم المتحركة.
المثال التالي لديه 2 ثانية تأخير قبل بدء الحركة:
مثال
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
} انها محاولة لنفسك » تعيين كم مرة يجب على الرسوم المتحركة تشغيل
و animation-iteration-count تحدد الخاصية عدد المرات التي يجب أن يعمل في مجال الرسوم المتحركة.
والمثال التالي تشغيل الرسوم المتحركة 3 مرات قبل أن يتوقف:
مثال
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
} انها محاولة لنفسك » يستخدم المثال التالي القيمة " infinite " لجعل تستمر الحركة إلى الأبد:
مثال
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
} انها محاولة لنفسك » تشغيل الرسوم المتحركة في اتجاه عكسي أو دورات البديل
و animation-direction يستخدم خاصية السماح لتشغيل الصور المتحركة في الاتجاه المعاكس أو دورات بديلة.
والمثال التالي تشغيل الرسوم المتحركة في الاتجاه المعاكس:
مثال
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
reverse;
} انها محاولة لنفسك » يستخدم المثال التالي قيمة "alternate" لجعل الرسوم المتحركة تعرض لأول مرة إلى الأمام، ثم إلى الخلف، ثم إلى الأمام:
مثال
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
alternate;
} انها محاولة لنفسك » تحديد منحنى سرعة الحركة
و animation-timing-function الخاصية تحديد منحنى سرعة الحركة.
الخاصية الرسوم المتحركة توقيت وظيفة يمكن أن يكون القيم التالية:
-
ease- تحدد الرسوم المتحركة مع بداية بطيئة، ثم بسرعة، ثم تنتهي ببطء (هذا هو الافتراضي) -
linear- يحدد الرسوم المتحركة بنفس السرعة من البداية الى النهاية -
ease-in- تحدد الرسوم المتحركة مع بداية بطيئة -
ease-out- تحدد الرسوم المتحركة مع نهاية بطيئة -
ease-in-out- تحدد الرسوم المتحركة مع بداية بطيئة ونهاية -
cubic-bezier(n,n,n,n)- يتيح لك تحديد القيم الخاصة بك في وظيفة مكعب بيزيه
يوضح المثال التالي بعض من منحنيات السرعة المختلفة التي يمكن استخدامها:
مثال
#div1 {animation-timing-function: linear;}
#div2
{animation-timing-function: ease;}
#div3 {animation-timing-function:
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5
{animation-timing-function: ease-in-out;} انها محاولة لنفسك » الرسوم المتحركة الاختزال الملكية
يستخدم المثال التالي ستة من خصائص الرسوم المتحركة:
مثال
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
انها محاولة لنفسك » نفس تأثير الحركة على النحو الوارد أعلاه يمكن تحقيقه باستخدام الاختزال animation الملكية:
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 » التمرين 6»
خصائص CSS3 الرسوم المتحركة
يسرد الجدول التالي @keyframes حكم وجميع خصائص الرسوم المتحركة:
| الملكية | وصف |
|---|---|
| @keyframes | يحدد قانون الرسوم المتحركة |
| animation | خاصية الاختزال لوضع كافة الخصائص الرسوم المتحركة |
| animation-delay | يحدد مهلة لبدء الرسوم المتحركة |
| animation-direction | تحدد ما إذا كان ينبغي أن تضطلع به في مجال الرسوم المتحركة في الاتجاه المعاكس أو دورات بديلة |
| animation-duration | يحدد عدد الثواني أو مللي ثانية يأخذ الرسوم المتحركة لإكمال دورة واحدة |
| animation-fill-mode | يحدد نمط للعنصر عندما لا يلعب الرسوم المتحركة (عندما يتم الانتهاء من ذلك، أو عندما يكون لديه تأخير) |
| animation-iteration-count | يحدد عدد المرات التي يجب أن تقوم على الرسوم المتحركة |
| animation-name | يحدد اسم الرسوم المتحركةkeyframes |
| animation-play-state | يحدد ما إذا كانت الرسوم المتحركة يتم تشغيل أو توقف |
| animation-timing-function | يحدد منحنى سرعة الحركة |