توفر لغة HTML بنية صفحة الويب ، وتوفر CSS تصميم وتنسيق هذا التطبيق. تتيح لك هذه المجموعة أيضًا إضافة الرسوم المتحركة ، حيث تبدو العناصر المتحركة أكثر جاذبية مقارنة بالعناصر الثابتة. كما أنه يتيح للعنصر تغيير نمطه تدريجيًا.
ستوجه هذه المقالة كيف يمكننا تطبيق الرسوم المتحركة على العناصر. لذا ، فلنبدأ!
ما هي CSS Animation Keyframes؟
لإنجاز الرسوم المتحركة ، يجب علينا ربط الرسوم المتحركة بعنصر HTML. لهذا الغرض ، استخدم الكلمة الأساسية ' تضمين التغريدة 'متبوعًا باسم الحركة. يحدد هذا المكون بداية الحركة ونهايتها.
كيفية إعداد CSS Animation Keyframes؟
لإعداد الإطارات الرئيسية للرسوم المتحركة في CSS ، سنتناول مثالين.
مثال 1
لإعداد الإطارات الرئيسية للرسوم المتحركة في CSS ، قم بتنفيذ الخطوات التالية:
-
- أضف يحمل اسم الفصل ' الرئيسية- div '.
- داخل div ، أضف div آخر باسم الفئة ' إمج بينج '.
- داخل ملف img-peng div هذا ، أضف
لوضع الصورة. هذه العلامة لها ثلاث سمات ، ' src 'لتوفير مسار الصورة ،' كل شىء 'هو النص البديل الذي تتم إضافته في حالة عدم عرض الصورة ، و' العرض 'لتوفير عرض الصورة.
لغة البرمجة
< شعبة صف دراسي = 'main-div' >
< شعبة صف دراسي = 'إمغ بنغ' >
< IMG src = 'images / penguin.png' كل شىء = 'البطريق' العرض = '100' >
شعبة >
شعبة >
.main-div {
CSS
العرض: 90 ٪ ؛
الارتفاع: 90 بكسل ؛
لون الخلفية: RGB ( 67 و 66 و 87 ) ؛
الهامش: 20 بكسل تلقائي ؛
الحشو: 10 بكسل ؛
}
في CSS ، ' .main-div 'للوصول إلى فئة div. الخصائص المطبقة عليها موضحة أدناه:-
- ' العرض 'قيمة الخاصية عرض div.
- ' ارتفاع 'لتعيين ارتفاع div.
- ' لون الخلفية 'تطبق خاصية اللون على خلفية العنصر.
- ' حافة 'تم تعيينه كـ' 20 بكسل '، مما يشير إلى المسافة من أعلى وأسفل ، وتعني كلمة' تلقائي 'مسافة متساوية من اليسار واليمين.
- ' حشوة 'قيمة الخاصية 10 بكسل ، والتي تطبق مساحة حول محتوى العنصر.
نمط فئة إمج بينج
.img-peng {
العرض: 50 بكسل ؛
الارتفاع: 100 بكسل ؛
الموقف: نسبي ؛
الرسوم المتحركة: اهتز.
مدة الرسوم المتحركة: 2 ثانية ؛
وظيفة توقيت الرسوم المتحركة: 2 ثانية ؛
عدد التكرار للرسوم المتحركة: لانهائي ؛
}
ال ' .img-peng 'للوصول إلى فئة div المذكورة في ملف HTML أعلاه. تم تصميم عنصر div هذا بالخصائص الموضحة أدناه:-
- ' العرض 'يتم استخدام قيمة الخاصية لتحديد عرض العنصر.
- ' ارتفاع 'يتم استخدام قيمة الخاصية لتحديد ارتفاع العنصر.
- ' موقع 'يتم تعيين القيمة' نسبيا '، مما يعني أنه سيتم وضعه بالنسبة إلى موضعه الطبيعي.
- ' الرسوم المتحركة اسم 'مُعطى كـ' هزة '. ومع ذلك ، يمكنك تسمية الرسوم المتحركة وفقًا للمتطلبات.
- ' مدة الرسوم المتحركة يمثل 'مدة الرسم المتحرك ، وهي ثانيتان.
- ' وظيفة توقيت الرسوم المتحركة 'يتم تعيين قيمة 2s مما يعني أنه في ثانيتين ، يكتمل الرسم المتحرك.
- ' الرسوم المتحركة-التكرار-العد 'تم تعيينه على أنه لانهائي ، مما يعني أن هذه الحركة ستحدث في وقت غير محدود.
تحديدkeyframes مع من وإلى الكلمات الأساسية
@ اهتز keyframes {
من {
أعلى: 50 بكسل ؛
}
إلى {
الهامش السفلي: 200 بكسل ؛
}
}
يتم سرد وصف الإطارات الرئيسية للرسوم المتحركة المعينة على الصورة أدناه:-
- ' تضمين التغريدة 'يشير إلى اهتزاز اسم الحركة متبوعًا بالكلمة الأساسيةkeyframes. ضمن هذه القاعدة ، يتم تحديد سلوك الحركة.
- داخل أقواسها المتعرجة ، من ' و ' إلى 'الكلمات الرئيسية تحدد فترات زمنية مختلفة لتحديد سلوك الحركة.
- ال ' أعلى 'بقيمة 50 بكسل ، مما يعني أن الرسوم المتحركة تبدأ من 50 بكسل من أعلى الشاشة وتستمر حتى 200 بكسل في الجزء السفلي.
نتيجة لذلك ، سترى الناتج التالي:
الآن ، دع الرسوم المتحركة تتصرف بشكل مختلف على فترات مختلفة. للقيام بذلك ، استخدم النسب المئوية للرسوم المتحركة فيkeyframes.حدد keyframes @ بالنسب المئوية
@ اهتز keyframes {
0 ٪ {
اليسار: -50 بكسل ؛
}
25 ٪ {
اليسار: 50 بكسل ؛
}
خمسون ٪ {
اليسار: -25px ؛
}
75 ٪ {
اليسار: 25 بكسل ؛
}
100 ٪ {
اليسار: 10 بكسل ؛
}
}
لذلك ، وصف مقتطف الشفرة أعلاه مذكور هنا:-
- تمثل قيم النسبة 0٪ و 25٪ و 50٪ و 75٪ و 100٪ الحركة على فترات زمنية مختلفة.
- علاوة على ذلك ، عند 0٪ ، ستكون المساحة الموجودة على يسار الصورة ' -50 بكسل '. عند 25٪ ، ستكون المساحة على اليسار ' 50 بكسل '. عند 50٪ ، ستكون المساحة على اليسار ' -25px '. عند 75٪ ، ستكون المساحة المتبقية ' 25px '، وعند اكتمال الرسم المتحرك (100٪) ، ستكون المساحة المتبقية' 10 بكسل '.
يعرض الكود أعلاه الرسوم المتحركة التالية:
لنأخذ مثالاً آخر لنرى كيف يمكننا تعيين الرسوم المتحركة على الصور.مثال 2
في HTML ، أضف
له اسم الفئة ' الصفحة الرئيسية '. داخل عنصرهذا ، ضع علامتي div مع الفئات ' سحابة 1 ' و ' سحابة 2 '، على التوالى.لغة البرمجة
< شعبة صف دراسي = 'الصفحة الرئيسية' >
< شعبة صف دراسي = 'cloud1' > شعبة >
< شعبة صف دراسي = 'cloud2' > شعبة >
شعبة >
هيئة {
CSS
حافة: 0 ؛
حشوة: 0 ؛
}
في CSS ، سنقوم بتعيين خصائص CSS التالية لعنصر الجسم:-
- ' حافة 'كخاصية 0 تحدد عدم وجود مسافة حول العنصر.
- ' حشوة 'ذات القيمة 0 تحدد عدم وجود مساحة حول محتوى العنصر.
أسلوب div الصفحة الرئيسية
.الصفحة الرئيسية {
صورة الخلفية: url ( / الصور / wolf-night.png ) ؛
تكرار الخلفية: لا تكرار ؛
حجم الخلفية: غطاء ؛
الارتفاع: 100 فولت
الموقف: نسبي ؛
إخفاء الفائض؛
}
هنا:-
- ' .الصفحة الرئيسية 'للوصول إلى فئة div.
- ' الصورة الخلفية 'يتم تعيين القيمة' url (/images/wolf-night.png) 'حيث الصور هي المجلد الذي يحتوي على صورة wolf-night.png.
- ' تكرار الخلفية 'يتم تعيين القيمة' لا تكرار مما يعني أن الصورة سيتم عرضها مرة واحدة.
- ' حجم الخلفية 'تم تعيينه على أنه' التغطية 'لملء عنصر div بأكمله.
- ' ارتفاع '100vh وهو ما يمثل 100٪ من ارتفاع منفذ العرض.
- ' موقع 'كنسبي يضبط موضع الصورة بالنسبة إلى موقعها الحالي.
- ' تجاوز 'يتم تعيين قيمة الخاصية على أنها مخفية لإخفاء جزء الصورة الأكبر من أن يتناسب مع الحاوية.
نمط cloud1 class
.cloud1 {
صورة الخلفية: url ( / الصور / cloud.png ) ؛
حجم الخلفية: تحتوي ؛
تكرار الخلفية: لا تكرار ؛
الموقف: مطلق.
أعلى: 100 بكسل ؛
العرض: 500 بكسل ؛
الارتفاع: 300 بكسل ؛
الرسوم المتحركة: cloudanimation1 ؛
مدة الرسوم المتحركة: 70 ثانية ؛
عدد التكرار للرسوم المتحركة: لانهائي ؛
}
يتم تطبيق فئة div class cloud1 بالخصائص الموضحة التالية:-
- ' .cloud1 'للوصول إلى فئة cloud1 div.
- ' الصورة الخلفية 'على أنه عنوان url (/images/cloud.png) ، حيث تكون الصور هي المجلد الذي يحتوي على image cloud.png.
- ' حجم الخلفية 'بالقيمة' يحتوي 'يضمن رؤية الصورة.
- ' تكرار الخلفية 'مع تعيين القيمة على أنها' لا تكرار 'يعرض الصورة على أنها غير مكررة.
- ' موقع 'كمواضع مطلقة للصورة بالنسبة للعنصر الأصل.
- ' أعلى 'تعيّن الخاصية الصورة على 100 بكسل من الأعلى.
- ' العرض 'لتعيين عرض عنصر div على 500 بكسل.
- ' ارتفاع 'لضبط ارتفاع عنصر div على 300 بكسل.
- ' الرسوم المتحركة 'تم تعيين اسم cloudanimation1.
- ' مدة الرسوم المتحركة 'يمثل مدة الرسم المتحرك ، وهي 70 ثانية.
- ' الرسوم المتحركة-التكرار-العد 'يتم تعيين القيمة اللانهائية ، والتي ستكرر الرسوم المتحركة مرات لا نهائية.
حتى الآن ، قمنا بتطبيق خصائص CSS على الصفحة الرئيسية لفئة div و cloud1. الآن ، في القسم التالي ، سنصمم فئة div التالية المسماة cloud2.
نمط cloud2 فئة
.cloud2 {
صورة الخلفية: url ( / الصور / cloud.png ) ؛
حجم الخلفية: تحتوي ؛
تكرار الخلفية: لا تكرار ؛
الموقف: مطلق.
أعلى: 50 بكسل ؛
العرض: 200 بكسل ؛
الارتفاع: 300 بكسل ؛
الرسوم المتحركة: cloudanimation2؛
مدة الرسوم المتحركة: 15 ثانية ؛
عدد التكرار للرسوم المتحركة: لانهائي ؛
}
يتم تطبيق فئة cloud2 div مع الخصائص الموضحة أدناه:-
- ' .cloud2 'للوصول إلى فئة cloud2.
- ' الصورة الخلفية 'على أنه عنوان url (/images/cloud.png) ، حيث تكون الصورة عبارة عن مجلد يحتوي على image cloud.png.
- ' حجم الخلفية 'يحتوي على قيمة يتأكد من رؤية الصورة.
- ' تكرار الخلفية 'مع تعيين القيمة على أنه لا يوجد تكرار يعرض الصورة على أنها غير متكررة.
- ' موقع 'كمواضع مطلقة للصورة بالنسبة للعنصر الأصل.
- ' أعلى 'تعيّن الخاصية الصورة على 100 بكسل من الأعلى.
- ' العرض 'لتعيين عرض عنصر div.
- ' ارتفاع 'لتعيين ارتفاع عنصر div.
- ' الرسوم المتحركة 'تم تعيين اسم cloudanimation2.
- ' مدة الرسوم المتحركة 'يمثل مدة الرسم المتحرك.
- ' الرسوم المتحركة-التكرار-العد 'يتم تعيين القيمة اللانهائية ، والتي ستكرر الرسوم المتحركة مرات لا نهائية.
حددkeyframes لـ cloudanimation1
@ keyframes cloudanimation1 {
إلى {
اليسار: 0 بكسل ؛
}
من {
اليسار: 100 ٪ ؛
}
}
ترتبط مجموعة cloud1 div بالرسوم المتحركة الموضحة أدناه:-
- ' تضمين التغريدة 'اسم الرسوم المتحركة cloudanimation1 متبوع بالكلمة الأساسيةkeyframes المستخدمة لتحديد الانتقال.
- تحدد الكلمة الأساسيةkeyframes كيفية عمل الرسوم المتحركة من البداية إلى النهاية على الصور السحابية.
- ال ' إلى ' و ' من 'الكلمات الرئيسية التي تحدد cloud1 ستنتقل من 100٪ إلى 0px من الشاشة.
حددkeyframes لـ cloudanimation2
@ keyframes cloudanimation2 {
0 ٪ {
اليسار: 0 ٪ ؛
}
100 ٪ {
اليسار: 100 ٪ ؛
}
}
ترتبط فئة div class cloud2 بالرسوم المتحركة الموضحة أدناه:-
- ' تضمين التغريدة 'يمثل اسم الحركة cloudanimation2 متبوعًا بالكلمة الأساسيةkeyframes المستخدمة لتحديد الرسوم المتحركة.
- ال ' 0٪ ' و ' 100٪ 'تمثل بداية الحركة ونهايتها.
- عند 0٪ من الرسوم المتحركة ، ستكون السحابة على اليسار مع تعيين القيمة على 0٪ ، وستنتقل تدريجيًا إلى 100٪ من العرض.
انتاج |
هذا بارد! لقد ناقشنا كيف يمكننا تحديد الرسوم المتحركة للعناصر باستخدام الكلمة الأساسيةkeyframes بنجاح.استنتاج
يسمح CSS لنا بتطبيق الأنماط على عناصر HTML. تقوم الرسوم المتحركة في CSS بإجراء انتقالات من نمط إلى آخر. يتكون من مكونين ، أنماط الرسوم المتحركة ، والإطارات الرئيسية. تمثل أنماط الرسوم المتحركة خصائص مختلفة مثل الاسم ومدة الرسوم المتحركة وعدد مرات تكرار الرسوم المتحركة والمزيد. في حين أن مكون keyframe يحدد بداية ونهاية الرسم المتحرك. يوضح هذا الدليل بالتفصيل كيفية إعداد الإطارات الرئيسية للرسوم المتحركة مع الأمثلة.
- أضف