أمثلة على انتقال CSS - كيفية استخدام حركة التمرير وتغيير التعتيم والمزيد

إذا كنت تعمل باستخدام تقنيات الويب مثل CSS و HTML و JavaScript ، فمن المهم أن يكون لديك بعض المعرفة الأساسية حول الرسوم المتحركة والتحولات في CSS.

في هذه المقالة سوف نتعلم كيفية عمل بعض الرسوم المتحركة الأساسية للانتقال باستخدام CSS.

كيفية تحريك عنصر باستخدام الانتقال الأساسي عند التمرير

في هذا المثال ، سوف نجعل عتامة عنصر ما تتغير عندما يقوم المستخدم بالتمرير أو الماوس فوق العنصر.

      Static Template   .elem { background: blueviolet; width: 300px; height: 150px; } .elem:hover { opacity: 0.5; } 

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

دعنا نضيف خاصية تحويل مقياس لإضافة انتقال مقياس إلى العنصر.

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

لكن لا يبدو أن الانتقال سلس ، لأننا لم نحدد مدة الانتقال أو نستخدم أي وظيفة توقيت.  

إذا أضفنا transitionالخاصية ، فستجعل العنصر يتحرك بسلاسة أكبر.

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

لنفصل كيف تعمل خاصية النقل:

 transition: 500ms linear;
  • 500ms: مدة الانتقال بالميلي ثانية
  • linear: وظيفة التوقيت
div { transition:    ; }

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

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

إذن ما الذي يفعله هذا الرمز؟

  • نقل الملكية: الخاصية التي تريد تحريكها. ويمكن أن يكون أي عنصر CSS مثل background، height، translateY، translateX، وهلم جرا.
  • مدة الانتقال: مدة الانتقال
  • تأخير الانتقال: التأخير قبل بدء الانتقال

يمكنك معرفة المزيد حول الاستخدامات المختلفة لـ transitionCSS هنا.

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

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

كيفية نقل عنصر باستخدام Keyframes

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

      Static Template   .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); } } 

وهذا ما حصلنا عليه:

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

 animation: moveToRight 2s ease-in-out;

هنا قمت بتسمية الرسوم المتحركة moveToRight- ولكن يمكنك استخدام أي اسم تريده. ومدة 2s، و ease-in-outهي وظيفة التوقيت.

هناك وظائف توقيت الأخرى التي يمكنك استخدامها مثل ease-in، linear، ease-outالتي تجعل أساسا سلاسة الحركة. يمكنك معرفة المزيد عن وظائف التوقيت هنا.

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

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

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

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

from يمثل نقطة البداية أو الخطوة الأولى للرسوم المتحركة.

to هي نقطة النهاية أو الخطوة الأخيرة من الرسم المتحرك المراد تنفيذه.

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

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

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

يمكنك التلاعب بالخصائص وتقنيات الرسوم المتحركة في صندوق الحماية هنا:

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

كيفية تحريك المزيد من الخصائص وإدراجها في الانتقال

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

      Static Template   .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); } } 

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

animation: moveToLeft 5s linear infinite;

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

  • First step: set the element horizontally to translateX(0px), and change the background to the gradient.
 0% { transform: translateX(0px); background: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100% ); }
  • The second animation will move the element from the left to the right and change the background color.
 25% { transform: translateX(400px); background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); }
  • The third animation will move the element down using translateY and change the background color again.
  • In the fourth step, the element will move back to the left and change the background color.
  • In the fifth animation the element should go back to its original place.

Wrapping up

In this article, we covered various things you can do with CSS transitions. You can use CSS transitions in many ways in your applications to create a better user experience.

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

مرحبًا ، اسمي سعيد حياني ، لقد قمت بإنشاء subscribi.io لمساعدة المبدعين والمدونين والمؤثرين على زيادة جمهورهم من خلال الرسائل الإخبارية.