كيفية إنشاء الرسوم المتحركة CSS Keyframe

يمنح CSS المطورين القدرة على إضفاء الحيوية على صفحات الويب الخاصة بهم باستخدام الرسوم المتحركة للإطارات الرئيسية.

يتم تحقيق الرسوم المتحركة لـ CSS عن طريق تغيير الحالة الأولية لعنصر HTML من خلال خصائصه المختلفة. تتضمن بعض خصائص CSS العامة التي يمكن تحريكها ما يلي:

---

---

هل يشحن هاتفك بشكل أسرع في وضع الطاقة المنخفضة

• عرض
• ارتفاع
• موقع
• لون
• العتامة

تتم معالجة خصائص CSS العامة هذه بواسطة عناصر CSS محددة لإنشاء النتيجة المرجوة. إذا سبق لك أن صادفت عنصرًا متحركًا على صفحة ويب ، فمن المحتمل أن يكون العنصر متحركًا باستخدام الرسوم المتحركة للإطارات الرئيسية.

ما هو عنصر الإطارات الرئيسية؟

ال عنصر الإطارات الرئيسية يمكن استخدامه على عنصر HTML واحد أو أكثر يمكنه الوصول إليه. إنه يحدد نقطة معينة في حالة العنصر ويفرض المظهر الذي يجب أن يتمتع به هذا العنصر في هذا الوقت.

قد يبدو هذا كثيرًا ليهضم ، لكنه في الواقع بسيط للغاية. ال عنصر الإطارات الرئيسية له هيكل بسيط جدًا يمكن فهمه وتعديله بسهولة ليلائم أي متطلبات للرسوم المتحركة.

مثال هيكل الإطارات الرئيسية


@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}

لنفترض أنك تريد تحريك زر مستطيل أخضر بتحويله إلى زر دائري أزرق.

ضمن معلمات من عند في القسم أعلاه ، ستحتاج إلى وضع كل التصميم اللازم لجعل العنصر يبدو وكأنه زر مستطيل أخضر ، ثم في ملف إلى في القسم ، ستضع جميع متطلبات التصميم لتحويل هذا الزر إلى زر دائري أزرق.

---

---

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

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

ال خاصية الرسوم المتحركة لديه مجموعة من الخصائص الفرعية المختلفة ؛ يتم استخدامها مع بنية الإطارات الرئيسية أعلاه لتحريك عنصر HTML المطلوب.

---

---

ومع ذلك ، ما عليك سوى معرفة خمس من هذه الخصائص الفرعية والقيم المرتبطة بها ، لتحقيق الرسوم المتحركة في مشاريعك. تُعرف هذه الخصائص باسم:

• اسم الرسوم المتحركة
• مدة الرسوم المتحركة
• الرسوم المتحركة توقيت وظيفة
• الرسوم المتحركة تأخير
• الرسوم المتحركة-التكرار-العد

استخدام الرسوم المتحركة على صفحة الويب

باستخدام السيناريو أعلاه ، فإن الهدف هو إنشاء زر متحرك.

مثال للرسوم المتحركة للأزرار







Animation

/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}




Click!




يحتوي قسم الرسوم المتحركة في الكود أعلاه على الخصائص الفرعية الخمس التي تم ذكرها سابقًا. كل خاصية لها وظيفة مميزة للغاية وتعمل معًا على تحريك أي عنصر HTML تم تصميمها لاستهدافها.

ذات صلة: كيفية استهداف جزء من صفحة ويب باستخدام محددات CSS

خاصية Animation-name

هذه الخاصية هي الخاصية الأكثر أهمية في القائمة. بدون ال خاصية اسم الحركة ، فلن يكون لديك معرّف للماضي إلى عنصر الإطارات الرئيسية ، مما يجعل جميع الكود ضمن معلماته عديمة الفائدة.

إذا نسيت تضمين خاصية أو اثنتين من الخصائص الفرعية الأخرى ، فربما لا يزال لديك رسوم متحركة جيدة إلى حد ما. ومع ذلك ، إذا نسيت ملف خاصية اسم الحركة لن يكون لديك رسوم متحركة.

خاصية مدة الرسوم المتحركة

تُستخدم هذه الخاصية لتحديد مقدار الوقت الذي يجب أن يستغرقه العنصر المتحرك عند الانتقال من حالة إلى أخرى.

في المثال أعلاه ، فإن ملف خاصية مدة الرسوم المتحركة مضبوطًا على 5 ثوانٍ (5 ثوانٍ) ، لذا سيكون إجمالي الزر الأخضر المستطيل 5 ثوانٍ قبل أن يتحول بالكامل إلى زر دائري أزرق.

خاصية Animation-delay

هذه الخاصية مهمة لسبب واحد ؛ قد يستغرق تحميل بعض صفحات الويب بالكامل بضع ثوانٍ (بسبب عدة عوامل مختلفة). لذلك خاصية تأخير الرسوم المتحركة يمنع الرسوم المتحركة من البدء فورًا في حالة استغراق صفحة الويب بعض الوقت للتحميل.

في المثال أعلاه ، فإن ملف خاصية تأخير الرسوم المتحركة تم ضبطه على 4s ، مما يعني أن الرسوم المتحركة لن تبدأ إلا بعد 4 ثوانٍ من زيارة صفحة الويب (مما يمنح صفحة الويب وقتًا كافيًا للتحميل قبل أن تبدأ الرسوم المتحركة).

خاصية الرسوم المتحركة-التكرار-العدد

توضح هذه الخاصية عدد المرات التي يجب أن ينتقل فيها العنصر المتحرك من حالة إلى أخرى. ال خاصية Animation-iteration-count يأخذ القيم التي هي كلمات وأرقام. يمكن أن تكون قيمة الرقم من 1 إلى الأعلى ، بينما تكون قيمة الكلمة عادةً لانهائي .

في المثال أعلاه ، فإن ملف قيمة عدد التكرار للرسوم المتحركة تم تعيينه على لانهائي ، مما يعني أنه طالما أن صفحة الويب في الأعلى ، فإن خاصية الزر ستتحرك من حالة إلى أخرى باستمرار.

خاصية الرسوم المتحركة-توقيت-الوظيفة

تحدد هذه الخاصية حركة العنصر المتحرك أثناء انتقاله من حالة إلى أخرى. ال خاصية الرسوم المتحركة-توقيت-وظيفة عادةً ما يتم تعيين إحدى قيم السهولة الثلاث.

• سهولة في
• التخفيف من
• سهولة في الخروج

ال سهولة في الخروج يستخدم أعلاه ؛ يؤدي هذا إلى نقل الرسوم المتحركة ببطء من حالة إلى أخرى. إذا كان الهدف هو إنشاء انتقال بطيء عندما يتحول الزر من مستطيل أخضر إلى دائرة زرقاء ، فستستخدم سهولة في القيمة . إذا كنت تريد الانتقال البطيء في الاتجاه المعاكس فقط ، فستستخدم امتداد قيمة التخفيف .

تقليل الكود الخاص بنا

في معظم الحالات ، يُنظر إلى تقليل طول البرنامج على أنه نهج عملي. ويرجع ذلك أساسًا إلى أن عددًا أقل من سطور التعليمات البرمجية يقلل من احتمالية حدوث أخطاء دون أن يلاحظها أحد في برامجك.

يمكن تقليل الرمز أعلاه بأربعة أسطر. يمكن تحقيق ذلك ببساطة عن طريق استخدام خاصية الرسوم المتحركة دون تحديد صريح لكل خاصية من خصائصها الفرعية.

تقليل رمز مثال حركة الزر







Animation

/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}