56-الرسوم المتحركة في CSS (CSS Animations)

خصائص أخرى للرسوم المتحركة في CSS

بالإضافة إلى تحديد الإطارات الرئيسية باستخدام @keyframes، هناك العديد من الخصائص الأخرى التي يمكنك استخدامها للتحكم في سلوك الرسوم المتحركة:

• animation-name – تحدد اسم الرسوم المتحركة التي تريد تطبيقها على عنصر.
• animation-duration – تحدد المدة التي تستغرقها الرسوم المتحركة حتى تكتمل (بالثواني أو المللي ثانية).
• animation-delay – تحدد مقدار الوقت الذي يتم تأخير بدء الرسوم المتحركة (بالثواني أو المللي ثانية).
• animation-iteration-count – تحدد عدد المرات التي يتم فيها تشغيل الرسوم المتحركة (مرة واحدة، مرتين، ثلاث مرات، إلخ).
• animation-direction – تحدد اتجاه تشغيل الرسوم المتحركة (عادي، عكس، بالتناوب).
• animation-timing-function – تحدد سرعة تشغيل الرسوم المتحركة (باستخدام دالة توقيت).
• animation-fill-mode – تحدد ما يحدث للعنصر بعد اكتمال الرسوم المتحركة (يبقى على النمط النهائي، يعود إلى النمط الأصلي، إلخ).

يمكنك الجمع بين هذه الخصائص لإنشاء تأثيرات رسوم متحركة معقدة.

دعم المتصفحات للرسوم المتحركة

تشير الأرقام في الجدول إلى إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.

ما هي الرسوم المتحركة في CSS (CSS Animations)?

تتيح الرسوم المتحركة تغيير عنصر تدريجيًا من نمط إلى آخر.

يمكنك تغيير العديد من خصائص CSS التي تريدها، بالعدد الذي تريده.

لاستخدام الرسوم المتحركة في CSS، يجب عليك أولاً تحديد بعض الإطارات الرئيسية للرسوم المتحركة.

تحتفظ الإطارات الرئيسية بالأنماط التي سيكون عليها العنصر في أوقات معينة.

قاعدة @keyframes

عندما تحدد أنماط CSS داخل قاعدة @keyframes، ستتغير الرسوم المتحركة تدريجيًا من النمط الحالي إلى النمط الجديد في أوقات معينة.

ولكي تعمل الرسوم المتحركة، يجب ربطها بعنصر.

يربط المثال التالي الرسوم المتحركة “example” بعنصر <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 المدة التي يجب أن تستغرقها الرسوم المتحركة حتى تكتمل. إذا لم يتم تحديد خاصية animation-duration، فلن يحدث أي تحريك، لأن القيمة الافتراضية هي 0 ثانية (0s).

في المثال أعلاه، حددنا متى سيتغير النمط باستخدام الكلمات الأساسية “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;
}

تأخير الرسوم المتحركة (Delay an Animation)

تحدد خاصية animation-delay تأخيرًا لبدء الرسوم المتحركة.

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

مثال:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

القيم السالبة

القيم السالبة مسموح بها أيضًا. عند استخدام قيم سالبة، ستبدأ الرسوم المتحركة كما لو كانت تعمل بالفعل منذ ن ثانية.

في المثال التالي، ستبدأ الرسوم المتحركة كما لو كانت تعمل بالفعل منذ ثانيتين:

مثال:

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 ما إذا كان يجب تشغيل الرسوم المتحركة للأمام أو للوراء أو في دورات متبادلة.

يمكن أن تأخذ خاصية animation-direction القيم التالية:

• normal – يتم تشغيل الرسوم المتحركة بشكل طبيعي (للأمام). هذه هي القيمة الافتراضية.
• reverse – يتم تشغيل الرسوم المتحركة في الاتجاه المعاكس (للخلف).
• alternate – يتم تشغيل الرسوم المتحركة للأمام أولاً، ثم للوراء.
• alternate-reverse – يتم تشغيل الرسوم المتحركة للوراء أولاً، ثم للأمام.

سيشغل المثال التالي الرسوم المتحركة في الاتجاه المعاكس (للخلف):

مثال:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

يستخدم المثال التالي القيمة “alternate” (تبادل) لجعل الرسوم المتحركة تعمل للأمام أولاً، ثم للوراء:

مثال:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

يستخدم المثال التالي القيمة “alternate-reverse” (تبادل معكوس) لجعل الرسوم المتحركة تعمل للوراء أولاً، ثم للأمام:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

تحديد سرعة تنفيذ الرسوم المتحركة (Specify the Speed Curve of the Animation)

تحدد خاصية animation-timing-function سرعة تنفيذ الرسوم المتحركة.

يمكن أن تأخذ خاصية animation-timing-function القيم التالية:

• ease (سهل) – تحدد رسوم متحركة تبدأ ببطء، ثم تصبح سريعة، ثم تنتهي ببطء (هذه هي القيمة الافتراضية).
• linear (خطي) – تحدد رسوم متحركة بنفس السرعة من البداية إلى النهاية.
• ease-in (دخول سهل) – تحدد رسوم متحركة تبدأ ببطء.
• ease-out (خروج سهل) – تحدد رسوم متحركة تنتهي ببطء.
• ease-in-out (دخول وخروج سهلان) – تحدد رسوم متحركة تبدأ وتنتهي ببطء.
• cubic-bezier(n,n,n,n) – تتيح لك تعريف قيمك الخاصة في دالة cubic-bezier.

يوضح المثال التالي بعضًا من منحنيات السرعة المختلفة التي يمكن استخدامها:

مثال:

#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;}

تحديد مظهر العنصر بعد انتهاء الرسوم المتحركة (Specify the fill-mode For an Animation)

لا تؤثر رسوم المتحركة في CSS على عنصر قبل تشغيل الإطار الرئيسي الأول أو بعد تشغيل الإطار الرئيسي الأخير. يمكن للخاصية animation-fill-mode تجاوز هذا السلوك.

تحدد خاصية animation-fill-mode نمطًا لعنصر الهدف عندما لا يتم تشغيل الرسوم المتحركة (قبل البدء أو بعد الانتهاء أو كليهما).

يمكن أن تأخذ خاصية animation-fill-mode القيم التالية:

• none (لا شيء) – القيمة الافتراضية. لن تطبق الرسوم المتحركة أي أنماط على العنصر قبل تشغيله أو بعده.
• forwards (إلى الأمام) – سيحتفظ العنصر بقيم النمط التي تم تعيينها بواسطة الإطار الرئيسي الأخير (يعتمد على animation-direction و animation-iteration-count).
• backwards (إلى الوراء) – سيحصل العنصر على قيم النمط التي تم تعيينها بواسطة الإطار الرئيسي الأول (يعتمد على animation-direction)، ويحتفظ بها خلال فترة animation-delay.
• both (كلاهما) – ستتبع الرسوم المتحركة قواعد كل من forwards و backwards، مما يمد خصائص الرسوم المتحركة في كلا الاتجاهين.

يسمح المثال التالي للعنصر <div> بالاحتفاظ بقيم النمط من الإطار الرئيسي الأخير عندما تنتهي الرسوم المتحركة:

مثال:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

يسمح المثال التالي للعنصر <div> بالحصول على قيم النمط التي تم تعيينها بواسطة الإطار الرئيسي الأول قبل بدء الرسوم المتحركة (خلال فترة animation-delay):

مثال:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

يسمح المثال التالي للعنصر <div> بالحصول على قيم النمط التي تم تعيينها بواسطة الإطار الرئيسي الأول قبل بدء الرسوم المتحركة، والاحتفاظ بقيم النمط من الإطار الرئيسي الأخير عندما تنتهي الرسوم المتحركة:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

خاصية اختصار الرسوم المتحركة (Animation Shorthand Property)

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

مثال:

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

يمكن تحقيق نفس تأثير الرسوم المتحركة كما هو موضح أعلاه باستخدام خاصية الاختصار animation:

مثال:

div {
  animation: example 5s linear 2s infinite alternate;
}