تحولات CSS: أمثلة عملية لتصميم حركات التمرير وتغيير الشفافية

8 min read Aldawsari
دقائق القراءة: 8
إذا كنت تعمل في مجال تطوير الويب وتستخدم تقنيات مثل CSS و HTML و JavaScript، فمن الضروري أن تمتلك معرفة أساسية حول الحركات (Animations) والتحولات (Transitions) في CSS. سيتناول هذا المقال شرحًا عمليًا لكيفية إنشاء حركات تحول أساسية باستخدام CSS، مما يضيف لمسة احترافية وتفاعلية لتصاميمك.

تحريك العناصر باستخدام تحولات CSS الأساسية عند التمرير (Hover)

في هذا الجزء، سنتعلم كيفية تغيير شفافية عنصر ما (opacity) عندما يقوم المستخدم بتمرير مؤشر الفأرة فوقه.

مثال يوضح تغيير شفافية العنصر عند التمرير (hover):

 <!DOCTYPE html >
 < html lang = "en" >
 < head >
 < meta charset = "UTF-8" />
 < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
 < meta http-equiv = "X-UA-Compatible" content = "ie=edge" />
 < title > Static Template </ title >
 </ head >
 < style >
 .elem { background : blueviolet; width : 300px ; height : 150px ; }
 .elem :hover { opacity : 0.5 ; }
 </ style >
 < body >
 < div class = "elem" >
 </ div >
 </ body >
 </ html >

تأثير تغيير الشفافية لعنصر عند تمرير مؤشر الفأرة فوقه

يُعد هذا تحولًا بسيطًا يتم تفعيله عند التمرير فوق العنصر. يمكننا إضافة أكثر من تحول واحد ليتم تشغيله في نفس الوقت. لنضف خاصية التحويل transform مع قيمة scale لإضافة تأثير تكبير للعنصر.

إضافة تأثير التكبير (scale) عند التمرير:

 .elem :hover { transform : scale ( 1.1 ); }

تأثير تكبير العنصر عند التمرير باستخدام خاصية التحويل (transform)

لكن، قد لا يبدو التحول سلسًا بما فيه الكفاية، وذلك لأننا لم نحدد مدة التحول (duration) أو نستخدم دالة توقيت (timing function). عند إضافة خاصية transition، سيصبح تحرك العنصر أكثر سلاسة وجمالية.

تطبيق خاصية transition لجعل الحركة أكثر سلاسة:

 .elem { background : blueviolet; width : 300px ; height : 150px ; margin : 20px auto; transition : 500ms linear; }

تأثير تحول سلس للعنصر بعد إضافة خاصية الانتقال (transition)

فهم خاصية Transition في CSS

دعنا نفصل كيفية عمل خاصية transition:

 transition : 500ms linear ;

هنا، تعني 500ms مدة التحول بالمللي ثانية، بينما linear هي دالة التوقيت (timing-function) التي تحدد سرعة التحول.

الصيغة العامة لخاصية transition هي كالتالي:

 div { transition : <property> <duration> <timing-function> <delay>; }

يمكننا إضافة المزيد من الخيارات كما هو موضح أدناه (أمثلة من MDN):

 #delay { transition-property : font-size; transition-duration : 4s ; transition-delay : 2s ; }

ماذا تفعل هذه الخصائص؟

  • transition-property: الخاصية التي ترغب في تحريكها. يمكن أن تكون أي خاصية CSS مثل background، height، translateY، translateX، وغيرها.
  • transition-duration: مدة التحول.
  • transition-delay: التأخير قبل بدء التحول.

يمكنك معرفة المزيد حول الاستخدامات المختلفة لخاصية transition في CSS من خلال المصادر الموثوقة.

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

يمكننا تحقيق المزيد باستخدام تحولات CSS لجعل الحركات أكثر إبداعًا وتفاعلية.

تحريك عنصر باستخدام Keyframes

دعنا نلقي نظرة على مثال يتحرك فيه العنصر من النقطة A إلى النقطة B. سنستخدم هنا خاصيتي translateX و translateY.

مثال على تحريك عنصر أفقيًا باستخدام @keyframes و translateX:

 <!DOCTYPE html >
 < html lang = "en" >
 < head >
 < meta charset = "UTF-8" />
 < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
 < meta http-equiv = "X-UA-Compatible" content = "ie=edge" />
 < title > Static Template </ title >
 </ head >
 < style >
 .elem { background : orange; width : 300px ; height : 150px ; animation : moveToRight 2s ease-in-out; animation-delay : 1000ms ; }
 @keyframes moveToRight { 0% { transform : translateX ( 0px ); }
 100% { transform : translateX ( 300px ); }
 }
 </ style >
 < body >
 < div class = "elem" >
 </ div >
 </ body >
 </ html >

تأثير تحريك العنصر أفقيًا باستخدام @keyframes

في هذا المثال، استخدمنا خصائص جديدة مثل animation و @keyframes. استخدمنا خاصية animation لتحديد اسم الحركة ومدتها، بينما تسمح لنا @keyframes بوصف كيفية تحرك العنصر عبر مراحل مختلفة.

صيغة خاصية animation:

 animation : moveToRight 2s ease-in-out ;

هنا، قمت بتسمية الحركة moveToRight – ولكن يمكنك استخدام أي اسم تفضله. المدة هي 2s (ثانيتان)، و ease-in-out هي دالة توقيت (timing function). توجد دوال توقيت أخرى يمكنك استخدامها مثل ease-in، linear، و ease-out، والتي تجعل الحركة أكثر سلاسة. يمكنك معرفة المزيد عن دوال التوقيت المختلفة من خلال المصادر الموثوقة.

تأخذ قاعدة @keyframes اسم الحركة، وفي هذه الحالة هو moveToRight.

 @keyframes moveToRight { 0% { transform : translateX ( 0px ); }
 100% { transform : translateX ( 300px ); }
 }

تنفذ @keyframes الحركة على خطوات متعددة. يستخدم المثال أعلاه النسب المئوية لتمثيل نطاق أو ترتيب التحولات. يمكننا أيضًا استخدام طريقتي from و to، كما هو موضح أدناه:

استخدام from و to في @keyframes:

 @keyframes moveToRight { from { transform : translateX ( 0px ); }
 to { transform : translateX ( 300px ); }
 }

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

مثال على @keyframes بخطوات متعددة باستخدام النسب المئوية:

 @keyframes moveToRight { 0% { transform : translateX ( 0px ); }
 50% { transform : translateX ( 150px ); }
 100% { transform : translateX ( 300px ); }
 }

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

تأثير حركة معقدة تتضمن تحولات متعددة في نفس الوقت

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

تحريك خصائص متعددة وتضمينها في التحول

هذه المرة، سنقوم بتحريك الخلفية (background) وسنجعل العنصر يتحرك في نمط مربع. سنجعل الحركة تستمر إلى الأبد باستخدام خاصية infinite كدالة توقيت.

مثال على حركة معقدة تتضمن تحريك الخلفية والعنصر في نمط مربع:

 <!DOCTYPE html >
 < html lang = "en" >
 < head >
 < meta charset = "UTF-8" />
 < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
 < meta http-equiv = "X-UA-Compatible" content = "ie=edge" />
 < title > Static Template </ title >
 </ head >
 < style >
 .elem { background : orange; width : 250px ; height : 250px ; border-radius : 10px ; animation : moveToLeft 5s linear infinite; animation-delay : 1000ms ; }
 @keyframes moveToLeft { 0% { transform : translateX ( 0px ); background : linear-gradient ( to right, #ff8177 0% , #ff867a 0% , #ff8c7f 21% , #f99185 52% , #cf556c 78% , #b12a5b 100% ); }
 25% { transform : translateX ( 400px ); background : linear-gradient ( 120deg , #84fab0 0% , #8fd3f4 100% ); }
 50% { transform : translateY ( 200px ) translateX ( 400px ); background : linear-gradient (to top, #30cfd0 0% , #330867 100% ); }
 75% { transform : translateX ( 0px ) translateY ( 200px ); background : linear-gradient ( 120deg , #f6d365 0% , #fda085 100% ); }
 100% { transform : translateY ( 0px ); }
 }
 </ style >
 < body >
 < div class = "elem" >
 </ div >
 </ body >
 </ html >

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

 animation : moveToLeft 5s linear infinite ;

ثم قمنا بتقسيم الحركة إلى أربع خطوات رئيسية. في كل خطوة، سنقوم بتشغيل تحول مختلف، وستعمل جميع الحركات بالتسلسل.

  1. **الخطوة الأولى (0%):** يتم تعيين العنصر أفقيًا إلى translateX(0px)، وتغيير الخلفية إلى تدرج لوني. 
     0% { transform : translateX ( 0px ); background : linear-gradient ( to right, #ff8177 0% , #ff867a 0% , #ff8c7f 21% , #f99185 52% , #cf556c 78% , #b12a5b 100% ); }
  2. **الخطوة الثانية (25%):** ستحرك هذه الحركة العنصر من اليسار إلى اليمين وتغير لون الخلفية. 
     25% { transform : translateX ( 400px ); background : linear-gradient ( 120deg , #84fab0 0% , #8fd3f4 100% ); }
  3. **الخطوة الثالثة (50%):** ستحرك العنصر للأسفل باستخدام translateY وتغير لون الخلفية مرة أخرى.
  4. **الخطوة الرابعة (75%):** سيعود العنصر إلى اليسار ويغير لون الخلفية.
  5. **الخطوة الخامسة (100%):** يعود العنصر إلى مكانه الأصلي.

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

الخلاصة التقنية

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

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *