اجعل صفحات الويب الخاصة بك تنبض بالحياة باستخدام الرسوم المتحركة والتحولات في CSS

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

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

تعتبر CSS أو Cascading Style Sheets مسؤولة عن جعل المواقع أكثر تفاعلية من خلال تحديد أسلوبها وتخطيطها وتصميماتها. أحدث معيار لـ CSS هو أن CSS3 قد أدخلت مفهوم الرسوم المتحركة والتحولات التي تعزز تجربة المستخدم من خلال إضافة عمق إضافي إلى واجهة المستخدم. باستخدام الرسوم المتحركة والتحولات في CSS ، يمكنك سرد القصص وإنشاء تأثيرات باهظة وجعل تفاعل المستخدم مع موقع الويب الخاص بك أكثر فاعلية وذات مغزى.

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

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

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

تحديدkeyframes

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

• ما الخصائص المتغيرة
• عندما يتحرك العنصر
• كيف ينعش العنصر

يمكنك تحديد الإطار الرئيسي الخاص بك على النحو التالي:

@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}

هنا "إلى" و "من" حدد بداية الحركة ونهايتها. يمكننا أيضًا تحديد رسوم متحركة للحظات وسيطة من الوقت بين البداية والنهاية على النحو التالي:

@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}

يمثل 0٪ هنا بداية الحركة ، ويمثل 100٪ نهاية الحركة ، و 50٪ يمثل التغيير بين البداية والنهاية. ولكن ، كيف يمكننا إخبار المتصفح بالوقت الذي يجب أن تظهر فيه الرسوم المتحركة؟ نقوم بذلك بمساعدة بعض خصائص الرسوم المتحركة . ترتبط خصائص الحركة هذه بالعنصر المراد تحريكه. فمثلا:

element_name
{
animation_property: value;
style_property: value;
}

يمكن أن يكون العنصر هنا أي علامة HTML مثل div و span و img و p وما إلى ذلك و style_property هو أي خاصية تصميم CSS مثل background_color و width و height وما إلى ذلك. دعنا الآن نلقي نظرة على بعض خصائص الرسوم المتحركة بالتفصيل.

1. keyframes : تُستخدم الإطارات الأساسية لتحديد رمز الرسوم المتحركة كما هو موضح أعلاه.
2. اسم الحركة : الاسم المحدد مع keyframes @ هو اسم الحركة. يستخدم هذا الاسم للإشارة إلى الإطارات الرئيسية مع العنصر المراد تحريكه.
3. مدة الرسوم المتحركة : تُستخدم لتحديد مدة مدة الرسوم المتحركة بالثواني أو بالملي ثانية. على سبيل المثال ، إذا قمنا بتعيينها على 5 ثوانٍ ، فسيتم تشغيل الرسوم المتحركة لمدة 5 ثوانٍ فقط. إذا لم نقم بتعيين هذه الخاصية ، فلن يتم تشغيل الرسوم المتحركة على الإطلاق لأن قيمتها الافتراضية هي 0.
4. تأخير الرسوم المتحركة : يمكننا تأخير بدء الرسوم المتحركة عن طريق تحديد وقت تأخير الرسوم المتحركة. على سبيل المثال ، إذا كنت تريد بدء الرسم المتحرك بعد 5 ثوانٍ من تحميل الصفحة في المتصفح ، فقم فقط بتعيين تأخير الرسوم المتحركة على 5 ثوانٍ.
5. اتجاهات الرسوم المتحركة : يمكننا إخبار المتصفح ما إذا كانت الرسوم المتحركة تتحرك في الاتجاه العكسي أو دورات بديلة مع هذه الخاصية. على سبيل المثال ، إذا كنت تريد تشغيل الرسوم المتحركة من البداية إلى النهاية ، فقم بتعيين قيمة مدة الرسوم المتحركة على أنها "عادية". إذا كنت تريد تشغيله من النهاية إلى البداية ، فما عليك سوى تعيين القيمة على "عكس".
6. وضع تعبئة الرسوم المتحركة : يمكننا تحديد نمط العنصر عندما لا يتم تشغيل الرسوم المتحركة باستخدام هذا الوضع ، أي عندما يتم تأخير الرسوم المتحركة أو الانتهاء منها ، فماذا يجب أن يكون نمط العنصر.
7. عدد مرات تكرار الرسوم المتحركة : يتم تمثيل عدد المرات التي يمكن فيها تشغيل رسم متحرك بواسطة هذه الخاصية. على سبيل المثال ، إذا كنت تريد تشغيل الرسم المتحرك مرة واحدة ، قم بتعيينه على 1 ، أو إذا كنت تريد تشغيل الرسم المتحرك إلى الأبد ، فقم فقط بتعيينه على "لانهائي".
8. وظيفة توقيت الرسوم المتحركة : تُستخدم هذه الخاصية لتحديد منحنى السرعة للرسوم المتحركة مثل الخطي أو التسارع أو عدم التسريع.
9. الرسوم المتحركة : هي خاصية الاختزال لتعيين جميع خصائص الرسوم المتحركة.

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

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 244px;
  top: 100px;
 }
 100% {
  left: 488px;
  top: 0;
 }
}

.stage:hover .object {
 animation: slide 2s linear;	/*shorthand animation property*/
}

.object {
 background: #2db34a;
 border-radius: 50%;
 height: 50px;
 position: absolute;
 width: 50px;
}

الانتقالات

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

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

element 
{
style_property: value;
transition_property: value;
}

يحدد العنصر هنا عنصر HTML الذي تريد تحويله مثل div و H1 و img وما إلى ذلك. style_property هو نمط CSS المطبق على هذا العنصر. دعونا الآن نلقي نظرة على بعض خصائص الانتقال :

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

على سبيل المثال ، ستعمل الشفرة التالية على تغيير عرض عنصر div عند تمرير الماوس. انظر إلى خاصية اختصار الانتقال المطبقة هنا.

div { 
  width: 50px;
  height: 50px;
  background: blue;
  transition: height 4s;     /*transition shorthand on height for 4 seconds*/
}
div:hover {
  height: 200px;      /* increase height on mouse hover */
}

الرسوم المتحركة مقابل الانتقالات

أوجه التشابه بين الرسوم المتحركة والانتقالات

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

الاختلافات بين الرسوم المتحركة والانتقالات

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

بادئات البائع

لا يدعم كل متصفح جميع ميزات CSS3. ومن ثم ، فإننا نستخدم البادئات مع خصائص CSS هذه لمتصفحات معينة مثل -webkit- (Safari) أو -moz- (Firefox) أو -o- (Opera). يتيح ذلك لعلامات المتصفح إضافة دعم لميزة CSS3 هذه. تُعرف هذه البادئات ببادئات البائع أو بادئات CSS Browser . ومن ثم ، نحتاج إلى وضع بادئات البائع جنبًا إلى جنب مع الرسوم المتحركة وخصائص الانتقال أيضًا. على سبيل المثال ، ضع في اعتبارك الرمز أدناه وشاهد كيف تم استخدام بادئات البائع لـ Safari:

div {
width: 100px;
height: 100px;
background: red;

/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;

/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

نصيحة! يمكنك تجنب هذا الزحام باستخدام مكتبات مثل -prefix-free . إنها مكتبة JavaScript ستضيف بادئة المستعرض الحالي إلى أي كود CSS. تحقق من العديد من هذه المكتبات المتاحة على شبكة الإنترنت.

استنتاج

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