كل ما تحتاج لمعرفته لتنفيذ الرسوم المتحركة في CSS

CSS هي إحدى أقوى الطرق لجعل صفحة الويب تفاعلية. إنه يغير شكل ومظهر أساسياتنا صفحة على الإنترنت. إحدى الميزات المهمة والمثيرة التي تقدمها CSS هي أنها تتيح لنا أداء الرسوم المتحركة. يسمح لنا بنقل العناصر داخل صفحتنا. لنبدأ رحلة الرسوم المتحركة في CSS بالترتيب التالي:

• الرسوم المتحركة في CSS
• الإطارات الرئيسية في CSS
• خصائص الرسوم المتحركة

الرسوم المتحركة في CSS

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

ما هو مقرر علوم البيانات

• الإطارات الرئيسية
• الرسوم المتحركة
  

الرسوم المتحركة CSS مدعومة في جميع المتصفحات. ومع ذلك ، تتطلب بعض المتصفحات القديمة مثل Safari (حتى الإصدار 8.0) بادئة (-webkit-) لتفسير خصائص الرسوم المتحركة. فمثلا:

.anim {height: 200px width: 200px الخلفية: lightblue position: النسبي border-radius: 100٪ -webkit-animation-name: cssanim / * المتصفحات القديمة * / -webkit-animation-duration: 5s / * المتصفحات القديمة * / الرسوم المتحركة -name: cssanim animation-duration: 5s} / * old متصفحات * / @ -webkit-keyframes cssanim {0٪ {left: 0px} 100٪ {left: 300px}}keyframes cssanim {0٪ {left: 0px} 100 ٪ {اليسار: 300 بكسل}}

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

الإطارات الرئيسية في CSS

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

تحتاجkeyframes إلى خصائص معينة للتحكم في الرسوم المتحركة مثل اسم الحركة والمراحل والخصائص.

• اسم - مطلوب اسم لكل رسم متحرك لوصف سلوكياته.

• مراحل - تمثل المرحلة اكتمال الرسوم المتحركة. يمكن أن يتم الإشارة إليه إما باستخدام كلمة رئيسية 'إلى' و 'من' أو كنسبة مئوية ، بينما يمثل 0٪ حالة البداية ويمثل 100٪ الحالة النهائية للرسوم المتحركة. فائدة استخدام التمثيل النسبي هو أنه يمكننا تحديد عدة مراحل وسيطة بينهما ، أي ما يجب أن يكون سلوك الرسوم المتحركة عند 50٪ مرحلة أو 75٪ إلخ.

• الخصائص - تمنحنا هذه الخصائص التحكم في إطارات keyframes @ للتلاعب بها أثناء الرسوم المتحركة.

.anim {height: 200px width: 200px background: lightblue position: النسبي border-radius: 100٪ animation-name: cssanim animation-duration: 5s}keyframes cssanim {0٪ {transform: scale (0.5) opacity: 0} 50 ٪ {تحويل: مقياس (1.5) عتامة: 1} 100٪ {تحويل: مقياس (1)}}

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

• مبدئي: يعيّن هذه الخاصية إلى قيمتها الافتراضية.

• يرث: يرث هذه الخاصية من عنصرها الأصلي.

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

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

يحدد اسم الحركة ، والذي يُستخدم فيkeyframes للتلاعب.القيم الممكنة هي:

• اسم: يحدد هذا الاسم المراد ربطه بالإطار الرئيسي للرسوم المتحركة.
• لا شيء: هذه هي القيمة الافتراضية ويمكن استخدامها لتجاوز الرسوم المتحركة الموروثة أو المتتالية.

بناء الجملة:

اسم الرسوم المتحركة: الاسم | لا شيء | الأولي | يرث

.anim {height: 200px width: 200px background: lightblue position: النسبي border-radius: 100٪ animation-name: cssanim animation-duration: 5s}keyframes cssanim {0٪ {left: 0px} 100٪ {left: 300px} }

• مدة الرسوم المتحركة

يحدد الوقت الذي تستغرقه الرسوم المتحركة لإكمال تنفيذ واحد. يتم تحديده بالثواني أو بالمللي ثانية (على سبيل المثال ، 4 ثوانٍ أو 400 مللي ثانية). القيمة الافتراضية لهذه الخاصية هي 0 ثانية ، لذا إذا لم يتم تحديد هذه الخاصية فلن تحدث الحركة.

بناء الجملة:

مدة الرسوم المتحركة: الوقت

.anim {الارتفاع: 200 بكسل العرض: 200 بكسل الخلفية: الموضع الأزرق: الحد النسبي نصف القطر: 100٪ اسم الحركة: cssanim animé-duration: 4s}keyframes cssanim {0٪ {transform: scale (0.4) opacity: 0} 50 ٪ {تحويل: مقياس (1.4) عتامة: 1} 100٪ {تحويل: مقياس (1)}}

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

تتيح لنا خاصية Animation-delay (تأجيل الرسوم المتحركة) تحديد التأخير في الرسوم المتحركة. يحدد متى سيبدأ تسلسل الرسوم المتحركة في التنفيذ.

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

بناء الجملة:

تأخير الرسوم المتحركة: الوقت

.anim {height: 200px width: 200px background: lightblue position: النسبي border-radius: 100٪ animation-name: cssanim animation-duration: 4s animation-delay: 4s}keyframes cssanim {0٪ {left: 0px} 100٪ {يسار: 250 بكسل}}

• الرسوم المتحركة-التكرار-العد

تشير هذه الخاصية إلى عدد مرات تشغيل تسلسل الرسوم المتحركة. القيمة الافتراضية لهذه الخاصية هي 1.القيم الممكنة هي:

• رقم - يدل على عدد التكرارات
• لانهائي - يشير إلى أن الرسوم المتحركة يجب أن تتكرر إلى الأبد

بناء الجملة:

عدد التكرار للرسوم المتحركة: رقم | لانهائي

.anim {height: 200px width: 200px background: lightblue position: النسبي border-radius: 100٪ animation-name: cssanim animation-duration: 2s animation-iteration-count: 4}keyframes cssanim {0٪ {left: 0px} 100٪ {اليسار: 100 بكسل}}

• اتجاه الرسوم المتحركة

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

• عادي - هذا هو السلوك الافتراضي ويتم تشغيل الرسوم المتحركة للأمام. بعد كل دورة ، تصل الرسوم المتحركة إلى حالتها الأولية ويتم تشغيلها مرة أخرى

• يعكس - يتم تشغيل الرسوم المتحركة في الاتجاه المعاكس. بعد كل دورة ، تصل الرسوم المتحركة إلى حالتها النهائية ويتم تشغيلها بشكل عكسي

• البديل - يتم عكس اتجاه الرسوم المتحركة ، أي يتم تشغيلها للأمام أولاً ثم للخلف في كل دورة. كل دورة فردية تعرض الرسوم المتحركة للأمام وكل دورة زوجية تعرض حركة للخلف.

• بديل عكس - يتم عكس اتجاه الحركة بالتناوب. هنا يتم تشغيل الرسوم المتحركة للخلف أولاً ثم إلى الأمام في كل دورة. تتحرك كل دورة فردية للخلف أو للخلف وكل دورة زوجية تقدم الرسوم المتحركة للأمام.

بناء الجملة:

اتجاه الحركة: عادي | عكس |بديل | بديل عكس

.anim {height: 200px width: 200px background: lightblue position: النسبي border-radius: 100٪ animation-name: cssanim animation-duration: 2s animation-iteration-count: infinite}keyframes cssanim {0٪ {left: 0px} 100٪ {اليسار: 100 بكسل}}

• الرسوم المتحركة توقيت وظيفة

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

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

• خطي - تحافظ الرسوم المتحركة على نفس السرعة طوال الدورة ، أي من البداية إلى النهاية.

• سهولة في - الرسوم المتحركة تبدأ ببطء.

• التخفيف من - الرسوم المتحركة تنتهي ببطء.

• سهولة في الخروج - تتحرك الرسوم المتحركة ببطء أثناء البداية والنهاية.

• بيزير مكعب (n ، n ، n ، n) - تتيح لنا هذه الميزة المتقدمة إنشاء وظيفة توقيت مخصصة من خلال تحديد قيمنا الخاصة. تتراوح القيمة المحتملة من 0 إلى 1.

بناء الجملة:

وظيفة توقيت الرسوم المتحركة: خطي | سهولة | سهولة الخروج | سهولة في | سهولة في الخروج |بيزير مكعب (n ، n ، n ، n)

.anim {height: 200px width: 200px background: lightblue position: النسبي border-radius: 100٪ animation-name: cssanim animation-duration: 2s animation-direction: reverse}keyframes cssanim {0٪ {background: orange left: 0px } 50٪ {background: yellow left: 200px top: 200px} 100٪ {background: blue left: 100px}}

• وضع تعبئة الرسوم المتحركة

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

• لا شيء - هذه هي القيمة الافتراضية للخاصية ، أي أن أنماط الرسوم المتحركة لا يتم تطبيقها على العنصر ، قبل أو بعد الرسوم المتحركة.

• إلى الأمام - يحتفظ العنصر بالأنماط في تسلسل الرسوم المتحركة النهائي ، أي بعد انتهاء الرسم المتحرك.

• إلى الوراء - يتم الاحتفاظ بالأنماط بواسطة العنصر في تسلسل الرسوم المتحركة الأولي ، أي قبل بدء الرسوم المتحركة بشكل خاص أثناء تأخير الحركة.

• على حد سواء - يشير هذا إلى أن الحركة ستتبع في كلا الاتجاهين ، أي إلى الأمام والخلف

بناء الجملة:

وضع تعبئة الرسوم المتحركة: لا شيء | إلى الأمام | للخلف | على حد سواء

.anim {width: 50px height: 50px background: lightblue color: white font-weight: bold position: النسبي للرسوم المتحركة: cssanim animation-duration: 5s animation-iteration-count: infinite border-radius: 100٪} # anim1 { animation-time-function: easy} # anim2 {animation-time-function: linear} # anim3 {animation-tim-function: easy-in} # anim4 {animation-tim-function: easy-out} # anim5 {animation- وظيفة التوقيت: easy-in-out}keyframes cssanim {من {left: 0px} إلى {left: 400px}}

• حالة تشغيل الرسوم المتحركة

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

• تلعب - لعرض الرسوم المتحركة قيد التشغيل
• متوقف مؤقتا - لعرض الرسوم المتحركة في حالة الإيقاف المؤقت.

بناء الجملة:

حالة تشغيل الرسوم المتحركة: متوقف مؤقتًا | تلعب

.anim {width: 100px height: 100px background: lightblue position: dynamic animation-name: cssanim animation-duration: 3s animation-delay: 2s animation-fill-mode: backwards border-radius: 100٪}keyframes cssanim {0٪ {top: 0px background-color: orange} 50٪ {top: 0px background-color: green} 100٪ {top: 100pxbackground-color: blue}}

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

يُعرف هذا باسم خاصية اختزال الرسوم المتحركة. يتم استخدامه لرمز أنظف. بمجرد اعتيادنا على جميع خصائص الرسوم المتحركة ، يُنصح باستخدام اختصار الرسوم المتحركة للترميز بشكل أسرع وتحديد جميع الخصائص في سطر واحد.

بناء الجملة:

الرسوم المتحركة: [اسم الحركة] | [مدة الرسوم المتحركة] | [وظيفة توقيت الرسوم المتحركة] |[تأخير الرسوم المتحركة] | [عدد التكرار للرسوم المتحركة] | [اتجاه الحركة] |[وضع تعبئة الرسوم المتحركة] | [حالة تشغيل الرسوم المتحركة]

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

.anim {height: 200px width: 200px background: lightblue position: النسبي border-radius: 100٪ animation-name: cssanim animation-duration: 2s animation-direction: normal animation-play-state: paused}keyframes cssanim {0٪ {background: orange top: 0px} 50٪ {background: yellow left: 200px top: 200px} 100٪ {background: blue left: 100px}}

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

ما هي السلسلة الفرعية في جافا

تحقق من الذي يأتي مع تدريب مباشر بقيادة مدرب وخبرة مشروع واقعية. يجعلك هذا التدريب بارعًا في مهارات العمل باستخدام تقنيات الويب الخلفية والأمامية. يتضمن التدريب على تطوير الويب ، jQuery ، Angular ، NodeJS ، ExpressJS ، و MongoDB.

لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في مدونة 'Animations in CSS' وسنعاود الاتصال بك.