يمكن أن تجذب الرسوم المتحركة في صفحة الويب المزيد من المستخدمين. اسأل نفسك هذا السؤال - إذا كنت سترى صفحة ويب بها قدر كبير من الرسوم المتحركة ، ألا ترغب في استكشاف المزيد؟ الآن ، مع انتقالات CSS ، يمكنك جعل عملك ينبض بالحياة مع بعض الرسوم المتحركة الرائعة. وتذكر ، يجب القيام بذلك بشكل صحيح. دعنا نستكشف عالم انتقالات CSS بالترتيب التالي:
- لماذا CSS Transitions؟
- خاصية الانتقال
- ماذا تريد أن تحدد؟
- خاصية وظيفة وظيفة توقيت الانتقال
- خاصية تأخير الانتقال
لماذا CSS Transitions؟
لنأخذ مثالا. إذا كنت تريد تغيير لون عنصر من الأبيض إلى الأزرق ، فسيكون هذا التغيير فوريًا تقريبًا. للحصول على تأثير أكثر حيوية ، يمكنك إجراء هذا التغيير تدريجيًا. هذا يبدو جذابًا بصريًا أيضًا. من خلال تمكين انتقالات CSS ، يمكنك تخصيص طريقة حدوث التغييرات. يمكنك تحديد كيفية حدوث التغييرات في العناصر في فترات زمنية محددة تتبع منحنى التسارع.
تتيح لك انتقالات CSS تحديد التغييرات لـ العناصر والفترات الزمنية المحددة وسرعة منحنى التسارع وأكثر من ذلك بكثير. يمكنك القيام بكل هذا بدون استخدام Flash أو جافا سكريبت .
لفهم أفضل ، يمكنك الرجوع إلى الصورة أدناه:
في الصورة أعلاه ، سيتغير عنصر HTML من الأحمر إلى الأزرق في غضون ثانية واحدة. سترى أيضًا اللون المتوسط عند حدوث الانتقال. إذا كنت لن تستخدم انتقالات CSS ، فستلاحظ أن التغيير في اللون من الأحمر إلى الأزرق فوري - لن ترى اللون المتوسط. باستخدام انتقالات CSS ، ستلاحظ تأثيرًا متحركًا عندما تتغير عناصر HTML من الحالة القديمة إلى الحالة الجديدة.
خاصية الانتقال
يمكنك استخدام خاصية الانتقال المختصرة للتحكم في انتقالات CSS. إن استخدام هذا الاختصار ليس سهلاً فحسب ، بل يمكنه أيضًا تجنب المعلمات غير المتزامنة التي قد تكون محبطة للغاية عند تصحيحها في CSS.
تحدد خاصية النقل خصائص CSS التي تريد تأثير الانتقال إليها. يتم تحريك خصائص CSS فقط.
نوع بيانات التاريخ في مثال SQL
بناء الجملة:
انتقال:
كمبتدئ ، قد تواجه بعض الصعوبات في استخدام الاختزال. إذا كنت تعتقد أن استخدام الاختصار معقد قليلاً بالنسبة لك الآن ، فيمكنك تحديد خصائص الانتقال بشكل منفصل. بالنسبة لعنصر HTML ، يمكنك تحديد خصائص الانتقال واحدة تلو الأخرى كما هو موضح في المثال أدناه:
div {width: 100px height: 100px background: lightblue transfer-property: width transfer-duration: 2s transfer-tim-function: linear Transportation-delay: 1s} div: hover {width: 300px}تحوم فوق المربع
في المثال أعلاه ، حددنا الخصائص (خاصية الانتقال ، ومدة الانتقال ، ووظيفة توقيت الانتقال ، وتأخير الانتقال) وقيمها بشكل منفصل. سنتعرف على خصائص الانتقال هذه قريبًا.
ماذا تريد أن تحدد؟
هناك شيئان أساسيان تحتاج إلى تحديدهما لإنشاء انتقالات CSS: خاصية CSS التي تريد إضافة تأثير إليها ، والمدة الزمنية لهذا التأثير.يجب أن تضع في اعتبارك أمرًا واحدًا - عندما لا تحدد المدة الزمنية ، سيأخذ الانتقال قيمة افتراضية 0 ، ولن يكون هناك أي تأثير.
دعونا ننظر في مثال:
يحدد الكود أدناه تأثير انتقال خاصية العرض لمدة خمس ثوانٍ.
div {width: 100px height: 100px الخلفية: الانتقال الأزرق: العرض 5s} div: hover {width: 600px}حرك المؤشر فوق عنصر div أعلاه لمشاهدة تأثير الانتقال.
في الكود أعلاه ، سترى أنه عند تحريك المؤشر فوق المربع الأزرق ، يزيد المربع الأزرق عرضه تدريجيًا لمدة زمنية تبلغ خمس ثوانٍ. ستلاحظ أيضًا أنه عند إزالة المؤشر من المربع الأزرق ، سيعود المربع الأزرق إلى حجمه الأصلي تدريجيًا (وليس على الفور). يمكنك أيضًا تغيير قيم العرض والمدة الزمنية لترى كيف تؤثر خاصية الانتقال هذه على عنصر HTML.
يمكنك أيضًا إضافة تأثير الانتقال إلى أكثر من خاصية واحدة. يمكنك القيام بذلك باستخدام الفواصل لفصل الخصائص. دعونا ننظر في مثال:
في الكود أدناه ، تم تحديد خاصية الانتقال للعرض والارتفاع والتحويل.
div {padding: 15px width: 150px height: 100px خلفية: انتقال أخضر: عرض 2 ثانية ، ارتفاع 2 ثانية ، تحويل 2s} div: hover {width: 300px height: 200px transform: rotate (360deg)} مرحبا بالعالم (تحوم فوقي)
مع المثال أعلاه ، سترى كيف يتحرك المربع الأخضر عندما تحوم فوق المربع.
لقد حددنا الخاصية والمدة الزمنية فقط. دعونا نرى المعلمات الأخرى مع أمثلة مختلفة.
خاصية وظيفة وظيفة توقيت الانتقال
تحدد هذه الخاصية منحنى السرعة لتأثير الانتقال. يمكن أن يأخذ القيم التالية:
- قيمة السهولة: هذه هي القيمة الافتراضية حيث يكون التأثير بطيئًا في البداية ثم أسرع وينتهي ببطء.
- القيمة الخطية: لا يغير هذا التأثير من سرعة الانتقال - فهو يحافظ على ثبات السرعة من البداية إلى النهاية.
- قيمة السهولة: يبدأ هذا التأثير ببطء.
- قيمة التسهيل: هذا التأثير له نهاية بطيئة.
- قيمة سهولة الإدخال: هذا التأثير له بداية بطيئة وكذلك نهاية بطيئة.
- قيمة بيزير مكعب (n، n، n، n): يمكنك تحديد مجموعة القيم الخاصة بك في دالة بيزير مكعب.
يوضح الكود أدناه تأثيرات الانتقال للقيم الخطية ، والسهولة ، والسهولة ، والتيسير ، وسهولة الخروج.
div {width: 100px height: 100px background: pink transfer: width 2s} # div1 {transfer-tim-function: linear} # div2 {transfer-tim-function: easy} # div3 {move-tim-function: easy-in } # div4 {Transportation-tim-function: Ease-out} # div5 {transfer-tim-function: easy-in-out} div: hover {width: 300px}تحوم فوق عناصر div أدناه
خطي
سهولة
سهولة في
التخفيف من
سهولة في الخروج
خاصية تأخير الانتقال
في بعض الأحيان ، تريد أن تظهر الرسوم المتحركة بعد مدة زمنية معينة. تتيح لك خاصية تأجيل الانتقال تحديد التأخير لتأثير الانتقال. يمكنك تحديد التأخير بالثواني.
لنأخذ مثالاً لمعرفة التأخير في تأثير النقل:
div {width: 100px height: 100px الخلفية: الانتقال باللون الأصفر: العرض 3s ، تأخير الانتقال: 1s} div: hover {width: 300px}تحوم فوق عنصر div أدناه
ملحوظة: يمكنك ملاحظة هذا التأخير لمدة ثانية واحدة قبل بدء التأثير
في الكود أعلاه ، عندما تحوم فوق المربع الأصفر باستخدام المؤشر ، ستلاحظ (لمدة ثانية واحدة) أنه لا يوجد أي تأثير. بعد انتظار لمدة ثانية واحدة ، ستلاحظ التأثير.
بهذا نصل إلى نهاية مقالة انتقالات CSS هذه. يمكنك إضافة رسوم متحركة إلى صفحات الويب الخاصة بك الآن. جرب هذه الأمثلة.
ماذا تفعل الإلحاق في جافا
تحقق من الذي يأتي مع تدريب مباشر بقيادة مدرب وخبرة مشروع واقعية. يجعلك هذا التدريب بارعًا في مهارات العمل باستخدام تقنيات الويب الخلفية والأمامية. يتضمن التدريب على تطوير الويب ، jQuery ، Angular ، NodeJS ، ExpressJS ، و MongoDB.
لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في مدونة 'CSS Transition' وسنعاود الاتصال بك.