المحتوى عن 'التحريك في css'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • نصائح وإرشادات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • التجارة الإلكترونية
  • الإدارة والقيادة
  • مقالات ريادة أعمال عامة

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
  • جافاسكريبت
    • Node.js
    • jQuery
    • AngularJS
    • Cordova
  • HTML
    • HTML5
  • CSS
  • SQL
  • سي شارب #C
    • منصة Xamarin
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • Sass
    • إطار عمل Bootstrap
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة Swift
  • لغة R
  • لغة TypeScript
  • سير العمل
    • Git
  • صناعة الألعاب
    • Unity3D
  • مقالات برمجة عامة

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • مقالات تصميم عامة

التصنيفات

  • خواديم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • مقالات DevOps عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • التسويق بالرسائل النصية القصيرة
  • استسراع النمو
  • المبيعات
  • تجارب ونصائح

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عمل حر عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 9 نتائج

  1. التحريك في css

    لقد ناقشنا في المقالات السابقة كيف يخلق الانتقال (transition) الحركة عبر الانتقال من حالة إلى أخرى. في هذه المقالة سنرى ما يحدث عندما نطبق عملية انتقال واحدة على عنصر واحد تحدث له عدة تغييرات، وكيفية استخدام عدة انتقالات معًا لتحسين التحريكات. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات التحريك؟ تجهيز بيئة العمل لإنشاء التحريكات التنقل بين الحالات التحريكات تطبيق عملي: الانتقالات خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاسكربت تطبيق عملي: الانتقالات المثال الأول: زر فني رأينا في المقالات السابقة تأثيرًا بسيطًا للتحويم على الأزرار (button hover)، يمكننا دمج عدة انتقالات على نفس الزر للحصول على تأثير أكثر تعقيدًا. المصدر: http://codepen.io/donovanh/pen/YPMGpJ في هذا المثال، يجمع تأثير التحويم بين عدة تغييرات للحالة، ولكنها مُحدّدة جميعًا عبر انتقال واحد: transition: transform 0.4s cubic-bezier(.72,-0.61,.25,1.51); إليك كيف يعمل هذا المثال. يتألف الزر من أيقونتين ونصّين. في الحالة الأولية (حالة غير التحويم non-hover state) يوضع النص "Follow me" وأيقونة Twitter داخل الزر. نضع الرمز @ والنص "cssanimation" خارج الزر على النحو التالي: ثم نضيف حالة تحويم، حيث يتم وضع العناصر الموجودة خارج الزر داخله، كما يلي: يمكننا فعل هذا باستخدام انتقالات CSS. على سبيل المثال، يُحدَّد موضع أيقونة Twitter باستخدام التموضع المطلق (absolute positioning). عند إعداد الأيقونة، يمكن تحديد موضعها في المكان الذي نريد باستخدام القيم left و top: .icon { position: absolute; left: 0.75em; top: 0.75em; } ثم نضيف حالة تحويم للزر، ونضع أيقونة Twitter خارج الزر عبر الخاصية transform: a:hover .icon { transform: translateY(3em); } إضافة overflow: hidden إلى الحاوية (container) يعني أنّ العناصر الموجودة خارج الزر لن تظهر. في غياب الانتقال ستختفي الأيقونة فجأة. نظرًا لأنّ كل عنصر من العناصر الموجودة داخل الزر من النوع span، فيمكننا تطبيق الانتقال عليها جميعًا دفعة واحدة: span { transition: transform 0.4s cubic-bezier(.72,-0.61,.25,1.51); } هذا يعني أنه سيحدث انتقال كل عناصر span إذا تغيرت حالتها، مثلًا، عند التحويم عليها. يتم تطبيق نفس الحيلة على الأجزاء الأخرى من الزر. يمكنك مشاهدة هذا المثال بالكامل على CodePen. المثال الثاني: كشف الخلفية في هذا المثال، قمت بإعداد بطاقة تحتوي نصًّا، مع عرض نص عند التحويم عليها. المصدر: http://codepen.io/donovanh/pen/LEvjJg الحالة الأولية (حالة غير التحويم) للبطاقة تُظهر عنوانًا، ولكنّ عتامة (opacity) نص الفقرة تساوي الصفر. عند التحويم، نقوم بتغيير ذلك إلى القيمة 1 لإظهار النص، مع تغيير ارتفاع حاوية النص. في غياب الانتقال، سيبدو هكذا. عندما نمرّر مؤشر الفأرة (نحوّم) فوق البطاقة، فسيكون التغيير مفاجئًا. مع إضافة انتقالين، سيتغيّر الانطباع تمامًا. وها هي النتيجة. يبدو الانتقال الأول (المكتوب بالصياغة المختزلة هذه المرة) كما يلي: transition: all 0.5s cubic-bezier(.48,-0.28,.41,1.4); يخبر هذا المتصفحَ بأنّ عليه تحريك جميع الخاصيات على مدى 0.5 ثانية، مع استخدام انتقال cubic-bezier لجعله يرتد. وفي هذه الحالة، فهو يؤثر على ارتفاع حاوية النص. الانتقال الثاني يجعل النص يتحرك. سنستخدم هنا دالة التوقيت ease-out: transition: all 0.4s ease-out; يمكننا تحقيق الكثير من التأثيرات من خلال تغيير الحالات في وضع التحويم. في هذا المثال، يُعطَى لارتفاع العنصر div ذو الصنف info وللفقرة الموجودة داخله عندما يكونان في الحالة ‎.card: hover. استخدمنا في هذا المثال، انتقالين، بحيث يتحرك كل جزء بطريقة مختلفة. وجود عناصر تتحرك بسرعات مختلفة يمكن أن يضيف جاذبية لعملية الانتقال. يمكنك مشاهدة هذا المثال على CodePen. انتقالات متعددة على عنصر واحد بالإضافة إلى استخدام عدة انتقالات على عدة عناصر، يمكننا أيضًا استخدام عدة عمليات انتقال على عنصر واحد. يمكن استخدام ذلك عندما تحتاج إلى تغيير خلفية عنصر ما بشكل منفصل عن حدوده. إذ قد يكون تطبيق انتقال واحد على جميع الخاصيات غير مناسب. يمكننا تحقيق ذلك من خلال الجمع بين عدة انتقالات في نفس التعليمة، حيث يتم فصل الانتقالات بفواصل. مثلًا: transition: background 1s ease-out, border 0.5s linear; ينطبق الانتقال الأول هنا على الخلفية فقط، أما الثاني (بعد الفاصلة) فينطبق فقط على الحدود. هذا يعني أنّ حالة التحويم التي تغيّر الخلفية ستستغرق ثانية واحدة، فيما سيستغرق انتقال الحدود 0.5 ثانية. تمرين في هذه المقالة درسنا كيف يمكن التعامل مع عدة تأثيرات عبر انتقال واحد، وكيف يمكن استخدام عدة انتقالات معًا. يجدر بك إلقاء نظرة على الأمثلة في CodePen: مثال 1: زر فني مثال 2: بطاقة Cat Hover هل يمكنك استخدام هذه الأنواع من الانتقالات في مشروع تعمل عليه حاليًا؟ لقد غطينا الكثير حتى الآن. سوف نلقي في المقالة التالية نظرة على كيفية تطبيق هذه الانتقالات باستخدام JavaScript. المصادر ترجمة وبتصرف للفصل multiple transitions من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضا المقالة التالية: الانتقالات وجافاسكربت المقالة السابقة: دوال التوقيت
  2. التحريك في css

    دالة التوقيت (timing function) تتحكم في وتيرة وسرعة التغيرات التي تحدث إبّان الانتقال (transition). باستخدام دوال التوقيت، يمكن جعل الانتقالات أكثر حيوية. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات التحريك؟ تجهيز بيئة العمل لإنشاء التحريكات التنقل بين الحالات التحريكات تطبيق عملي: الانتقالات خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافا سكريبت التحريكات بشكل عملي فيما يلي مثال للانتقال باستخدام دالة توقيت خطية، إذ تتحرك جيئةً وذهابًا بوتيرة ثابتة. قارن هذا بهذا المثال الذي يستخدم دوال التوقيت المسماة cubic-bezier. سترى فرقًا كبيرًا في وتيرة الحركة. في هذا المثال، سنستخدم دالة cubic-bezier مخصصة: دالة توقيت cubic-bezier تجعل مقاربة cubic-bezier في هذا المثال التحريكات تتراجع إلى الوراء قليلاً قبل التحول بسرعة إلى الحالة الثانية، حيث تتجاوزها فعليًا، ثم تعود إليها. أمثلة CSS التي أعطيناها في البداية، وحالة التحويم (hover state) في كل الأمثلة تعتمد على دالة التوقيت. سنلقي نظرة على كل تلك الدوال، ونتعرف على كيفية تأثيرها على الطريقة التي تتحرك بها العناصر. إذا كنت ترغب بالتجريب على هذه الأمثلة، فقد أعددت مشروعًا على CodePen يمكنك الدخول إليه والتعديل عليه. Linear دالة التسارع الخطي Linear يتغير التسارع الخطي (linear transition) بمعدل ثابت من البداية إلى النهاية. ونظرًا لعدم وجود منحنى في الانتقال، فهو لا يتسارع أو يتباطأ. يمكن أن يكون هذا مفيدًا إن كنت تريد إنشاء تحريك يحتاج إلى حركة ثابتة، مثل مشهد خلفية نافذة قطار متحرك، أو الدوران الثابت. Ease-in التسارع المتباطئ عند الانطلاق ease-in تبدأ دالة التسارع المتباطئ عند الانطلاق (ease-in timing function) ببطء وتتسارع في نهاية الانتقال. بشكل مشابه لكرة تتدحرج من أعلى التل، حيث تبدأ ببطئ، وتنتهي بسرعة كبيرة في الأسفل. Ease-out التسارع المتباطئ عند التوقف ease-out دالة التسارع المتباطئ عند التوقف (ease-out timing function) تتصرف بشكل معاكس لدالة التسريع الداخلي. إذ تبدأ بسرعة، ثم تتباطئ في نهاية الانتقال. هذا مفيد في الحالات التي تحتاج فيها إلى إعطاء الزائر شعورًا بأنّ شيئًا ما يندفع من خارج الشاشة ثم يبطئ للتوقف. Ease-in-out دالة التسارع المتباطئ عند الانطلاق والتوقف Ease-in-out دالة التسارع المتباطئ عند الانطلاق والتوقف (ease-in-out timing function)، هي مزيج من دالتي التسريع الداخلي والخارجي. إذ تبدأ ببطء، وتتسارع خلال الجزء الأوسط من الانتقال، ثم تتباطأ عند النهاية. يمكن أن تمثّل سيارة تبدأ من حالة توقف تام، ثم تتسارع، ثم تبطئ قبل التوقف. كما قد تكون مفيدة لإنشاء تحريك يمثل عملية التحميل. Cubic-bezier دالة التسارع المخصص Cubic-bezier جميع دوال التوقيت التي رأيناها حتى الآن هي أمثلة لمنحنى cubic bezier. وهو منحنى يصف "شكل" دالة التوقيت. وهكذا، فإنّ تحديد دالة توقيت cubic-bezier يكافئ إنشاء دالة توقيت خاصة بنا. تتألف دوال توقيت cubic-bezier من 4 قيم، تمثل إحداثيتين (co-ordinates). صياغة cubic-bezier قد تبدو على الشكل التالي: transition-timing-function: cubic-bezier(1,-0.49,.13,1.09); الإحداثيتان هنا هما (‎1, -0.49) و (‎.13, 1.09). على الرسم البياني تبدو كما يلي: المصدر: http://cubic-bezier.com/#1,-0.49,.13,1.09 بدلاً من إنشاء المنحنيات يدويًا، فأنا أستخدم موقع cubic-bezier.com. سيمكّنك هذا الموقع من إنشاء بعض التأثيرات الرائعة. تصبح منحنيات cubic-bezier ممتعة عند استخدام قيم أكبر من 1، إذ من الممكن إنشاء انتقالات تتخطى الحدود وترتد. Steps دالة الانتقال الخطوي Steps في حين تعتمد معظم دوال التوقيت على المنحنيات، فإنّ الدالة steps تُقسّم عملية الانتقال إلى مجموعة من المراحل، وتقفز من مرحلة إلى التي تليها. ‎على سبيل المثال، إذا حددت القيمة steps(4)‎، فإنّ مدة الانتقال ستقُسّم إلى 4 قفزات منفصلة (انظر الصورة أعلاه). هذا مفيد للتحريكات المفاجئة. على سبيل المثال، دوّار التحميل (loading spinner)، أو شخصية متحركة للعبة فيديو. من خلال تعيين موضع الخلفية في بداية سلسلة الإطارات (frames)، يمكن استخدام دالة التوقيت steps للقفز من إطار لآخر، وإحداث شعور بالحركة. لمشاهدة مثال على ذلك، شاهد التحريك Twitter fave button. يمكنك أيضًا تحديد ما إذا كان الانتقال سيحتفظ بالإطار الأول لجزء من مدة الانتقال، أم أنه سيحتفظ بالإطار النهائي. الوضع الافتراضي هو الإطار النهائي، على أساس أنّ الإطار الأول قد ظهر بالفعل قبل أن يبدأ التحريك. يمكننا تحديد الخيار المناسب عند تحديد الخطوات: transition: all 2s steps(10, start); transition: all 2s steps(10, end); تمرين تتمة للتمرين السابق: حاول تغيير قيمة transition-timing-function، وشاهد كيف يغير ذلك الطريقة التي يظهر بها الانتقال. يمكنك أيضًا محاولة تغيير القيم في هذا المثال التوضيحي. من الناحية الفنية، فهي تحريك (animation) وليست انتقالًا (transition)، لكنّ دالة التوقيت تنطبق بنفس الطريقة. المصادر ترجمة وبتصرف للفصل timing functions من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة التالية: الانتقالات المتعددة المقالة السابقة: خاصيات الانتقالات
  3. التحريك في css

    تعلّمنا في المقالة الماضية كيفية عمل الخاصية transition، وسنلقي في هذه المقالة نظرة على خاصيات الانتقالات. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات التحريك؟ تجهيز بيئة العمل لإنشاء التحريكات التنقل بين الحالات التحريكات تطبيق عملي: الانتقالات خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاسكربت تطبيق عملي: التحريكات الصياغة المختزلة مقابل الصياغة المطولة عند كتابة شيفرة CSS، يمكننا في كثير من الأحيان اختزال عدة خاصيات في خاصية واحدة مختزلة. على سبيل المثال، الصياغة المختزلة للخاصية padding تُكتب على النحو التالي: padding: 10px 20px 15px 25px; وهذا يكافئ: padding-top: 10px; padding-right: 20px; padding-bottom: 15px; padding-left: 25px; يمكننا بالطريقة نفسها كتابة الخاصية transition بشكل مختزل: transition: all 0.5s 1s linear; وهذا هو الشكل العام: transition: [property] [duration] [delay] [timing-function]; يمكن كتابة كل واحدة من هذه الخاصيات بشكل منفرد: transition-property: all; transition-duration: 0.5s; transition-delay: 1s; transition-timing-function: linear; لنلق نظرة على هذه الخاصيات. الخاصية transition-property عادةً ما ترد في بداية الصياغة المختزلة، وتمثلُ الخاصيةَ التي سيقوم المتصفح بتحريكها. لتغيير الخلفية على سبيل المثال، يمكن استخدام القيمة background. من الممكن أيضًا استخدام القيمة all، والتي تمثل جميع خاصيات CSS التي ينطبق عليها الانتقال. الخاصية transition-duration تمثل قيمةُ الخاصية transition-duration المدةَ التي يستغرقها الانتقال. فترة انتقال تساوي 3s (ثلاث ثوانٍ) ستكون أطول بثلاث مرات من فترة انتقال تساوي 1000ms. الخاصية transition-delay تخبر الخاصية transition-delay المتصفح بالانتظار قبل تطبيق الانتقال. هذه قيمة زمنية، ويمكن تحديدها بالثانية أو الميلي ثانية(ms). على سبيل المثال، 3s تكافئ ثلاث ثوان، و100ms تكافئ مئة ميلي ثانية. بشكل مكافئ، يمكنك كتابة تلك القيمة على شكل 0.1s. الأمر متروك لك. الخاصية transition-timing-function تستخدِم كل من الانتقالات (transitions) والتحريكات (animations) دوال التوقيت (timing functions). تحتاج دوال التوقيت إلى فقرة خاصة بها، لذا سنؤجل الحديث عنها إلى المقالة التالية. لكن بإيجاز، دوال التوقيت تعطي للتحريكات حيوية. الأشياء التي لا يطبّق الانتقال عليها رغم أنه يمكن استخدام الانتقالات على الخاصيات size و colour و border و background-position وغيرها، إلا أنّ هناك بعض الخاصيات التي لا يمكن تطبيق الانتقال عليها. فمثلًا، لا يمكن تطبيق الانتقال على عائلة الخطوط font-family، لأنّ هذا يعني أنّ على المتصفح إنشاء إطارات مفتاحية (keyframes) بين صورتين مختلفتين تمامًا من الخطوط. صور الخلفية المُنشأة باستخدام CSS، مثل التدرجات (generated gradients)، لا يمكن تطبيق التحريك على خاصياتها. لأنّ ذلك يعني أنّ المتصفح سيكون عليه استبدال صورة الخلفية بكل الإطارات المفتاحية للتحريك، لذلك فهو غير مدعوم. لكن يمكن تحريك خاصيات من قبيل opacity و background-position. وعن طريق تحريك صور الخلفية أو إخفائها، يمكنك إنشاء تأثيرات جذابة. يمكنك مشاهدة مثال Baymax، حيث يتم تحريك صورة الخلفية لإنشاء حركة. المصدر: http://[CSS](https://wiki.hsoub.com/CSS)animation.rocks/baymax يتم استخدام تأثير مماثل لإحداث تأثير اللمعان على الأزرار، حيث يتم تحريك تدرج الخلفية في مقدمة الزر. المصدر: https://[CSS](https://wiki.hsoub.com/CSS)animation.rocks/pseudo-elements/ تمرين لقد أنشأت مثالًا على Codepen لتجربة الانتقالات. المثال يقوم بالانتقال من شكل الماس (diamond shape) إلى شكل الدائرة. حاول تغيير بعض الخاصيات لمعرفة ما سيحدث. إذا كنت ترغب في التعمق أكثر في هذا الموضوع، فاضغط على الزر "Fork" لإنشاء نسختك الخاصة، ويمكنك بعد ذلك حفظ عملك في حساب Codepen الخاص بك. المصادر ترجمة وبتصرف للفصل transitions-properties من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة التالية: دوال التوقيت المقال السابقة: تطبيق عملي: الانتقالات
  4. الآن وبعد أن قدمنا الخاصيتين transition و animation، فقد حان الوقت للتعمق أكثر في الانتقالات (transitions)، ومطالعة بعض الأمثلة. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات التحريك تجهيز بيئة العمل لإنشاء التحريكات التنقل بين الحركات التحريكات الانتقالات بشكل عملي خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاسكربت تطبيق عملي: التحريكات الانتقالات تحدث الانتقالات في المتصفح عندما يتحوّل عنصر من حالة إلى أخرى. يرسم المتصفح الإطارات المفتاحية (keyframes) بين الحالة الابتدائية والحالة النهائية لإنشاء شعور بالحركة. الخاصية transition هي خاصية من خاصيات CSS. مثلها مثل الخاصيات height أو width أو border. يمكننا برمجة الانتقالات في CSS على النحو التالي: transition: background 0.5s linear; في هذه الحالة، نقول للمتصفح أنّ أيّ انتقال لخاصية الخلفية (background) سيستغرق نصف ثانية، إضافة إلى استخدام دالة التوقيت "الخطي" (linear). قد تتسبب الخاصية المذكورة أعلاه في تغيير خلفية الزر عند تمرير مؤشر الفأرة فوقه: button { background: white; transition: background 0.5s linear; } button:hover { background: green; } لاحظ الخاصية transition في المحدد button، والتي تقول للمتصفح أن يطبّق الانتقال على أي تغيير في الحالة، مثل التغيير الذي يحدث عن التحويم (hover)، وكذلك عند العودة إلى الحالة الأصلية بعد التحويم. إذا طبَّقنا الخاصية transition على حالة التحويم (hover) وحسب، فلن يتم الانتقال إلا إلى حالة التحويم، ولكن ليس عند العودة للحالة الأولى. إليك هذين المثالين التوضيحيَين. قد تجد أنّ هذه الأمثلة تحتوي على بعض الشيفرات غير المفهومة. سأعطي المزيد من التفاصيل في المقالات المقبلة، لكن لا تتردد في التجريب وتعديل القيم لمعرفة ما يحدث. مثال: انتقال الزر إليك مثالًا في CodePen يوضح تأثير التحويم (hover effect). في CodePen، يمكنك إجراء تغييرات على HTML و CSS ورؤية النتائج مباشرة. الشيء المهم الذي ينبغي التركيز عليه هو الخاصيات التي تبدأ بالبادئة transition-‎. transition-property: all; transition-duration: 0.4s; transition-timing-function: ease-out; تخبر هذه الشيفرة المتصفح بنوع الحركة التي ينبغي إنشاؤها عند الانتقال من حالة عدم التحويم (non-hover state)، إلى حالة التحويم (hover state). كما تُخبر المتصفح بالتحريك (الانتقال) التدريجي لكل الخصائص (الألوان والحجم والموضع) على مدار 0.4 ثانية. حاول تغيير بعض هذه القيم. على سبيل المثال، قم بتغيير "0.4s" إلى قيمة أطول، مثل "2s" (ثانيتين). كيف يبدو التحريك؟ يمكنك كذلك تغيير الخاصية من all إلى background. لإنشاء تأثير ممتع، حاول تغيير قيمة transition-timing-function من ease-out إلى: transition-timing-function: cubic-bezier(.59,-0.26,.33,1.42) دالة التوقيت cubic bezier تضفي على الحركة متعة وجاذبية. سنعود لدوال التوقيت بمزيد من التفاصيل في المقالات التالية. البادئات وتوافق المتصفحات لم أضمِّن بادئات المتصفحات (vendor prefixes) في شيفرات الأمثلة. وذلك لتسهيل قراءة الشيفرة، ولكن في حال كنت تستخدم الشيفرة في مرحلة الإنتاج فسيكون عليك إضافتها. أحب استخدام بادئ تلقائي Autoprefixer (وهو خيار متاح في Codepen، لتفعيله اضغط على أيقونة الإعدادات "cog" في قسم CSS)، ويمكن تفعيلها باستخدام أدوات البناء، مثل Grunt أو Gulp. بالمقابل، يمكنك كتابتها يدويًا على النحو التالي: -webkit-transition: ...; -moz-transition: ...; transition: ...; تمرين قم بتحرير الزر في المثال، وأضف أفكارك الخاصة. يمكنك تغيير الشكل (shape)، أو الحد (border)، أو أي خاصية أخرى. جرّب واستمتع، فالهدف هو التأكد من أنك تفهم كيف يؤثر الانتقال على تأثير التحويم الخاص بالعنصر. لمزيد من الإلهام، تحقَّق من تنسيق التحويم على هذا الرابط. هناك الكثير من الأمثلة الرائعة لاستلهام الأفكار. إذا كنت تريد التعمق في الموضوع أكثر، فأنشئ مشروعًا جديدًا في CodePen، مع إنشاء عنصر يتغير من حالة إلى أخرى عند التحويم عليه. حاول معرفة ما إذا كان يمكن أن يحتوي داخله عنصرًا يتحرك بمعدل مختلف. لا تقلق إذا لم تنجح في ذلك، سنغطي خاصيات التحريك بمزيد من التفاصيل في المقالات القادمة. المصادر ترجمة وبتصرف للفصل transitions in action من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة التالية: خاصيات الانتقال في CSS المقال السابقة: التحريكات
  5. التحريك في css

    لقد ناقشنا في المقالات السابقة استخدامات وفوائد التحريك (Animation)، ووجدنا بعض مصادر الإلهام، وألقينا نظرة على الأدوات والمواقع التي قد تكون مفيدة في التطوير، وتعرّفنا على كيفية تطبيق حركة عبر نقل عنصر من حالة إلى أخرى (transitions). هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات التحريك تجهيز بيئة العمل لإنشاء التحريكات التنقل بين الحالات التحريكات الانتقالات بشكل عملي خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاسكربت تطبيق عملي: التحريكات في هذه الفقرة ستتعرّف على الخاصية animation. التحريك في المتصفح الانتقال (Transition) والتحريك (animation) متشابهان. فكلاهما يأخذ شكل خاصية CSS، ويحدث خلال مدة معيّنة، إضافة إلى خصائص أخرى للتحكم في كيفية إنشاء المتصفح للحركة. في حين أنّ الانتقالات تدور حول جعل التغيير من الحالة "A" إلى الحالة "B" يبدوا سلسًا، فإنّ التحريكات هي وسيلة لوصف مراحل متعددة من الحركة. التحريكات مفيدة لإنجاز الحركات المعقدة في المتصفح. في المثال أعلاه، هناك 3 حالات (A و B و C). الانتقال سينتقل من A إلى C وحسب، في حين تسمح لنا التحريكات بتحديد مرحلة وسطية B، بحيث يتم المرور على كل الخطوات الثلاث. تتصرَّف التحريكات أيضًا بشكل مختلف قليلًا، إذ يمكنها أن تبدأ تلقائيًا. بينما قد يتطلب الانتقال إضافة صنف، أو تغييرًا في الحالة، مثل التحويم (hovering)، كما يمكن أن تبدأ التحريكات عند تحميل الصفحة. هذا يعني أنه في حال رغبت في سرد قصة ما، أو لفت الانتباه إلى شيء ما على الصفحة، فالتحريكات خيار جيد. أمثلة تعد حركة الزر "Save" التي نراها في Codepen مثالًا جيدًا على التحريكات. هذا التحريك يساعد الناس على ملاحظة الزر وتذكر ضرورة حفظ عملهم. يتكون التأثير من سلسلة من الإطارات المفتاحية (keyframes) التي تخبر المتصفح أن يهُزّ الزر من اليسار إلى اليمين. سنتعمّق أكثر في هذا الموضوع في فقرة الإطارات المفتاحية بشكل عملي . يمكننا أن نفعل الكثير من الأشياء عبر تحريك ونقل الإطارات المفتاحية عبر CSS. هذا مثال آخر ثلاثي الأبعاد: المثال CSS Mac Plus متوفر على موقع CodePen، وهذا دليل مفصل لكيفية تصميمه. الانتقال أم التحريك؟ تحدث الانتقالات عندما ينقل المتصفح عنصرًا من حالة إلى أخرى (من A إلى B) مما يوحي بحدوث حركة. يتم تطبيق ذلك عادةً نتيجة لحدث ما، مثل التحويم (hovering) فوق عنصر ما، أو إضافة صنف أو إزالته باستخدام JavaScript. التحريكات أكثر دينامية، وتحدث تلقائيًا، وتتيح لك إنشاء تسلسل من التحريكات عبر عدد من الإطارات المفتاحية، ويمكن أن تُنفّذ خلال دورات (loops). سنعود للخاصية animation لاحقًا. تمرين هل يمكنك التفكير في طرق لاستخدام التحريكات في صفحات الويب الخاصة بك؟ حاول أن تنتبه للتحريكات التي تحدث على المواقع التي تتصفحها. ابحث عن الأشياء التي تتحرك بطريقة مُلفتة. فعلى الأرجح أنها تحريكات. إذا قمت بتنزيل ملفي HTML و CSS الابتدائيَين، فقم بإلقاء نظرة على الخاصية 'animation'. على عكس الانتقالات، تحتاج التحريكات إلى جزء ثانٍ يسمى الإطارات المفتاحية (keyframes). حاول تغيير بعض القيم وشاهد ما يحدث. المصادر ترجمة وبتصرف للفصل animations من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة التالية: الانتقالات بشكل عملي المقال السابقة: التنقل بين الحركات
  6. التحريك في css

    سنلقي في هذه الفقرة نظرة على خاصية الانتقال transition. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات التحريك تجهيز بيئة العمل لإنشاء التحريكات التنقُّل بين الحالات التحريكات الانتقالات بشكل عملي خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاسكربت تطبيق عملي: التحريكات كانت المتصفحات فيما مضى بسيطة للغاية. فقبل وقت غير بعيد، لم تكن قادرة حتى على عرض الصور، أو التعامل إلا مع حفنة من الخطوط. ثم جاءت CSS، ومنحتنا القدرة على التحكم في شكل ومظهر صفحات الويب. التحريك (Animation) في المتصفحات ليس جديدًا. فقد وفرت لنا بعض مكتبات JavaScript مثل Flash و Canvas وغيرها طرقًا للتحريك، ولكن صارت CSS، في الآونة الأخيرة، خيارًا إضافيًا. الانتقالات إحدى الطرق التي تتيحها CSS للتحكم في التحريك في المتصفح هي باستخدام الخاصية 'transition'. بلغة المتصفحات، فإنّ الانتقال (transition) يعني حركة من حالة إلى أخرى. عندما نطبق عملية الانتقال على عنصر ما، فإننا نخبر المتصفح بأننا نريده أن ينقل، أو يحسب تلقائيًا، التغيير بين الحالات. على سبيل المثال، يمكننا تغيير تنسيق عنصر ما عند تمرير مؤشر الفأرة عليه، قم بتطبيق عملية الانتقال، وسينقل المتصفح التنسيق الأولي للعنصر إلى التنسيق الجديد نقلًا سلسًا مما يوحي بتطبيق حركة وحيوية على العنصر. خصائص الانتقال عندما نستخدم الانتقال على عنصر ما، فهناك الكثير من الخصائص التي يمكن أن تتحكم في كيفية الانتقال. يمكننا أن نجعله بطيئًا أو سريعًا، أو نؤخره، بل ويمكننا أن نتحكم في وتيرة التغيير باستخدام دوال التوقيت (timing functions). سوف نتطرق إلى ما يعنيه هذا في المقالة التالية. مثال آخر على الانتقالات المركبة: سنناقش قريبًا كيفية استخدام الانتقالات للقيام بمثل هذه التحريكات. مختصر القول الانتقال هو تغيير من حالة إلى أخرى. على سبيل المثال، عند تمرير مؤشر الفأرة فوق عنصر ما، فقد يتغير تنسيقه. الانتقالات تجعل التغيير يبدو كحركة متصلة وسلسة. تمرين كيف تبدو بيئة العمل خاصتك؟ قم بإلقاء نظرة على الشيفرة، وابحث عن الخاصية 'transition' في شيفرة CSS. هل يمكنك تخمين ما تفعله؟ في المرة القادمة التي تتصفح فيها الويب، ابحث عن أمثلة للانتقالات. ابحث عن التغييرات المثيرة للاهتمام، مثل ما يحدث عندما يُضاف عنصر جديد إلى الصفحة، أو عند تمرير مؤشر الفأرة فوق زر ما. ستجد أنّ الويب مليء بالتحريكات بمجرد أن تبدأ في البحث عنها. سنلقي في المقالة التالية نظرة عامة على الخاصية 'animation'، وكيف تختلف عن الخاصية 'transition'. المصادر ترجمة وبتصرف للفصل transitions من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة التالية: التحريكات المقالة السابقة: تجهيز بيئات العمل لإنشاء التحريكات
  7. سنتعلم في هذه الفقرة كيفية إنشاء تحريكات CSS ‏(CSS animations) ومشاهدتها في المتصفح. ولكن قبل البدء في كتابة الشيفرة، من الجيد أن نحدد سير العمل. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات التحريك تجهيز بيئة العمل لإنشاء التحريكات التحويلات التحريكات التحويلات بشكل عملي خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاسكربت تطبيق عملي: التحريكات هناك طريقتان للتطوير: التطوير في المتصفح، والتطوير المحلي (offline). التطوير في المتصفح إنّ أبسط طريقة للقيام بالتجارب الصغيرة هي التطوير عبر الإنترنت. الموقع الذي أستخدمه غالبًا هو CodePen. موقع JS Fiddle يُعد خيارًا ممتازًا أيضًا. في بقية هذا الدرس، سأستخدم CodePen لكتابة الأمثلة، لذا فمن المهم أن تكون على دراية بطريقة عمله. CodePen عبارة عن منصة برمجية، والتي يمكنك أن تجري عليها تغييرات على شيفرة HTML و CSS و JavaScript، ورؤية النتائج على الفور. تنقسم الشاشة إلى أربعة أقسام، قسم المعاينة، وأقسام HTML و CSS و JavaScript. يوجد داخل كل قسم خيارات تسمح لك بإعداد اللغات (Sass بدلًا من CSS على سبيل المثال) وغيرها من الأشياء المفيدة. التطوير المحلي للمشاريع الأكبر، فأنا أفضل التطوير محليًا. هناك عدة طرق للقيام بذلك، والتي هي أكثر فعالية وسرعة من العمل في المتصفح مباشرة. الخيار الأبسط: إنشاء ملفّي HTML و CSS الخيار الأبسط هو إنشاء ملف HTML ‏(filename.html) وربطه بملف CSS ‏(filename.css) . هذه طريقة مقبولة، لكن يمكن أن تكون بطيئة، حيث سيكون عليك التنقل كثيرًا بين المتصفح والمحرر. لقد قمت بإنشاء مجموعة من ملفات HTML و CSS، يمكنك نسخها واستخدامها لبدء العمل. قم بتنزيلها من هنا. Dreamweaver / Macaw / Muse / Coda / Sublime يمكنك بالطبع استخدام أي أداة تجدها مريحة لإنشاء صفحات الويب. كل ما تحتاجه حقًا هو محرر نصوص. بعض الأدوات الأخرى تأتي مع إمكانية التحرير البصري، إذا كنت تفضل العمل بها، فافعل ذلك. أنا شخصيًا أوصي بالعمل مباشرة على الشيفرة. سيساعدك فهم طريقة عمل CSS على إصلاح المشاكل، أو إنشاء تأثيرات لا يمكن أن توفرها الأدوات البصرية. أداة البناء Gulp إذا كنت معتادًا على Github و Node ومعالجة الشيفرات، فقد ترغب في إعداد بيئة تطوير على جهازك. أنا أحب أداة Gulp. فكونُها تعتمد على Node، يجعلها سريعة جدًا. يمكن تجميع الوحدات لتحويل Sass إلى CSS والإصلاح التلقائي لدعم المتصفح، والمزامنة مع المتصفحات بحيث لا تحتاج إلى تحديث المتصفح في كل مرة تحدّث الشيفرة. إذا سبق واستخدمت Grunt، أو أدوات البناء الأخرى، فسيكون سير العمل مألوفًا. لقد قمت بإنشاء مستودع Github لجعل التطوير المحلي أسرع. إذا كنت متعودًا استخدامَ Git، فزُر صفحة المستودع، وطالع الملف readme الذي يحتوي إرشادات الإعداد. يمكنك تحسينه ومشاركته إذا رغبت في ذلك. مختصر القول أثناء تعلُّمك للتحريك في CSS، لا تتردد في التعديل على الشيفرة وتجربة أمور جديدة. قد ترغب في استضافة الشيفرة بنفسك، أو قد تُفضِّل استخدام CodePen، الأمر يعود لك. تأكد من أنه يمكنك تحويل الأفكار إلى شيفرة بسلاسة. تمرين سجّل في CodePen. أضف بعض شيفرات HTML و CSS، وانظر بنفسك كيف تتغير النتائج على الفور. من الجيد أيضًا مطالعة بعض أمثلة CodePen على الصفحة الرئيسية، وتعلم كيفية عملها. اختياري: إذا كنت ترغب في تجربة التطوير المحلي، فقم بتنزيل ملفات البدء المحلية: الخيار الأساسي: ملفات HTML و CSS لبدء المشروع متقدم: ملفات البدء Gulp & Sass المصادر ترجمة وبتصرف للفصل creative-environments من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة التالية: التحويل المقالة السابقة: ما هي استخدامات التحريك
  8. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات التحريك تجهيز بيئة العمل لإنشاء التحريكات التنقل بين الحالات التحريكات تطبيق عملي: الانتقالات خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاسكربت تطبيق عملي: التحريكات قبل الدخول في الجانب الفني من التحريك (Animation) في CSS، سنناقش سبب القيام بالتحريك في المقام الأول. أبلغُ من الكلمات التحريك يمكن أن يوصل المعلومات بكفاءة، ويمكن استخدامه لجذب الانتباه، ولكن في جميع الحالات، فالهدف النهائي هو التواصل. إدراج الحركة في التصميمات يجعلها أكثر كفاءة في إيصال المعلومة. الصور المتحركة أبلغ من الكلمات الملفوظة أو المكتوبة. التحريك المعبّر والملائم يمكن أن يضيف جاذبية إلى تصاميمنا، و يعطي مصداقية إلى عملنا. ذلك لأننا اعتدنا على رؤية الحركة طوال الوقت في العالم "الحقيقي". لذلك، فإدخال الحركة إلى عملنا يجعله أكثر حيوية. مع التحسن المستمر في دعم المتصفحات للتحريك، فقد أصبحت خيارًا قابلًا للتطبيق أكثر من أي وقت مضى. من نواح كثيرة، التحريك قد يكون بنفس أهمية الخطوط التي نستخدمها، والتخطيطات التي ننشئها. ما المقصود بالتحريك في مجال تطوير المواقع؟ للتحريك فائدتان رئيسيتان: توصيل المعلومات، وجذب الانتباه. يمكننا إيجاد عدة طرق لاستخدام هاتين الميزتين أثناء تصميم المواقع. يمكن أن يكون التحريك معبرًا، كما يحدث عندما يتململ زر الحفظ في CodePen ليذكرنا بضرورة حفظ عملنا: نحن ماهرون في رصد الحركة. لذلك، فإنّ إضافة القليل من الحركة إلى عناصر الصفحة يمكن أن يضفي على الصفحة الحيوية. يمكننا أيضًا استخدام التحريك لتقديم المحتوى على الصفحة: يمكننا عن طريق تحريك المعلومات على الصفحة أن نعرض للقُرَّاء معلومة إضافية قد لا يمكن إيصالها بالمحتوى الساكن. يلفت التحريك الانتباه إلى المحتوى الجديد المُضاف، ويرسم سياق تلك المعلومة الجديدة. فسيظهر المحتوى الجديد فجأة بدون تقنية التحريك، وقد يظنّ القارئ أنه كان هناك طوال الوقت. يمكننا استخدام التحريك لرواية قصة: ‎‏ما سبق مقتبس من فيديو تعليمي للعبة "Portal". كتابة القصص لا يحتاج دائمًا إلى أن يكون حرفيًا. إذ يمكننا إضافة حركة معبّرة، مثل إظهار تغييرات البيانات في المخطط. بحيث يمكن للبيانات نفسها أن تروي قصة عبر الحركة. مع القوة العظيمة تأتي المسؤولية التحريك يفتح أمامنا آفاقًا كثيرة. إلا أنّ وجود الكثير من الأشياء المتحركة على الصفحة قد يشتت الانتباه. من الأفضل تجنّب التحريك عندما لا يكون ضروريًا، بحيث تكون لكل حركة تضيفها تأثير إيجابي. قد يعني هذا الاكتفاء بتحريك عنصر صغير فقط على صفحتك. فالأفضل ما قل ودل كما قيل. رغم كل شيء، إذا كنت ترغب في خلق تأثير بصري جذاب عبر القيام بالكثير من التحريك، فيمكنك القيام بذلك. لكن احرص على أن يكون ذلك بعيدًا عن المحتوى الذي تريد من المشاهدين أن يركزوا عليه. يمكنك فعل ذلك عبر جعل التحريك يحدث مرة واحدة فقط، بدلاً من تكراره باستمرار، أو بإيقاف التحريك عندما يبدأ الناس في تمرير الصفحة. مصدر إلهام التحريك له تاريخ طويل وغني. كتبت مؤخرًا منشورًا حول مبادئ التحريك على الويب بعنوان مبادئ التحريك في صفحات الويب باستخدام CSS. المبادئ مستمدة من كتاب ديزني (1981) Illusion of Life: Disney Animation. إذا كنت ترغب في التعمق في موضوع التحريك، فابحث عن مقاطع الفيديو التي تخص Animator’s Survival Kit videos. يوتيوب مليء بمصادر الإلهام والأفكار. للحصول على أمثلة متميزة وإبداعية، خصص بعض الوقت لتصفح Hover States. يعرض هذا الموقع جميع أنواع الأمثلة المبدعة للتحريك على الشبكة. موقع Dribbble.com مفيد أيضًا. على سبيل المثال، إليك مثالًا رائعًا من Dribbble يعرض مبادئ التصميم الخاصة بجوجل (Google’s Material Design principles. البحث عن "animation" هو أحد الطرق الجيدة للعثور على أفكار ملهمة. أتحقق كذلك بانتظام من مستجدات موقع CodePen. فهو مصدر رائع لصور وأمثلة التحريك. ملخص التحريك تقنية نافعة ومفيدة للغاية إذا استُخدِم بشكل صحيح، يمكن أن يكون أداةً مفيدةً في التصميم استخدمه لجذب الانتباه أو توصيل المعلومات لا تبالغ فيه إذا كنت تريد أن تتميز، فالتحريك قد يساعدك على ذلك تمرين فكّر في عملك ومشاريعك، وكيف يمكن أن يساعدك التحريك. يتحمس البعض ويبدؤون بتحريك كل شيء على الصفحة، حاول البحث عن طرق للاستفادة من التحريك بحيث تساعد زوارَك على فهم المحتوى بشكل أفضل. هل تريد أن توصل إلى زوار صفحتك شعورًا بالحركة والحيوية؟ هل هناك تغيير مفاجئ في صفحتك يحدث بسرعة وبشكل غير ملحوظ بحيث يمكن أن يُعرض بشكل أفضل عبر التحريك السلس؟ أخيرًا، ألق نظرة على مواقع مثل Hover States و Little Big Details و Dribbble. هذه المواقع ستساعدك كلما تحيّرت وأُغلِق عليك. المصادر ترجمة وبتصرف للفصل why animate من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة التالية: تجهيز بيئات العمل لإنشاء التحريكات
  9. استخدمنا في المقالات السابقة الخاصية transition للقيام بالتحريك بين حالتين، حالة عدم التحويم (non-hover state) وحالة التحويم (hover state). تحدُث تلك الانتقالات عند التحويم (تمرير مؤشر الفأرة) فوق العنصر. بيْد أنّ هذه ليست الطريقة الوحيدة لبدء التحريك، سنغطي في هذه المقالة طريقتين لفعل ذلك عبر استخدام JavaScript. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات التحريك؟ تجهيز بيئة العمل لإنشاء التحريكات التنقل بين الحالات التحريكات تطبيق عملي: الانتقالات خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاسكربت تطبيق عملي: التحريكات إضافة أو إزالة الأصناف أهم ما يميّز الانتقالات هي قدرتها على التحريك بين حالتين، لذا يمكننا إنشاء تلك الحالات على هيئة أصناف (classes) منفصلة ثم نضيف أو نزيل تلك الأصناف باستخدام JavaScript. المصدر: http://codepen.io/donovanh/pen/YPbxqa يتألف هذا المثال من زر ومحتوى مُتضمَّن في عنصر div. في البداية سيكون لحاوية المحتوى صنف hide. في CSS، الصنف hide له الخاصية opacity: 0;‎. لدينا أيضًا صنف ثانٍ في CSS يُسمى show. هذه الصنف لديه عتامة (opacity) مساوية للقيمة 1. عند النقر فوق الزر، يتراوح صنف العنصر div بين hide وshow. ولأجل تحريكه، فنحن نطبق عملية انتقال على العنصر div أيضًا. يمكنك مطالعة هذا على CodePen. إذا كنت ترغب في التعمق أكثر في الموضوع، فأنصحك بقراءة المقال Adding Appeal to Your Animations on the Web. في نهاية هذا الدرس، سنتعلم كيفية إجراء الانتقالات والتحريكات أثناء التمرير (scrolling). التحكم في الانتقالات عبر جافاسكربت يمكننا القيام بأكثر من إضافة أو إزالة الأصناف. فيمكننا باستخدام JavaScript، ضبط خاصيات CSS مباشرة على النحو التالي: element.style.transition = `opacity 1s ease-out`; في هذه الحالة، يمثل element عنصرًا حددناه. على سبيل المثال، إذا كان لعنصر ما المُعرّف js-show، فيمكنك تطبيق الانتقال عليه باستخدام getElementById: document.getElementById(`js-show`).style.transition = `opacity 1s ease-out`; عندما تفعل ذلك، يجب ألا تنسَ تضمين بادئات المتصفحات (vendor prefixes) أيضًا. سيُكتب ما سبق على النحو التالي: document.getElementById(`js-show`).style.webkitTransition = `opacity 1s ease-out`; document.getElementById(`js-show`).style.transition = `opacity 1s ease-out`; في هذا المثال، ستُطبّق webkitTransition على كل المتصفحات ذات البادئة -webkit- في CSS. ملخص درسنا في المقالات السابقة الخاصية transition، وتعلّمنا كيفية استخدامها لجعل المتصفح يحرِّك عنصرًا من حالة إلى أخرى. نقل عنصر من حالة إلى أخرى وقد تعلمنا في ثنيّات الطريق عدَّة خاصيات، مثل: المدة (duration) والتأخير (delay) ودوال التوقيت (timing functions). من خلال الجمع بينها، يمكننا تصميم تأثيرات جذابة، بل وتطبيق عدة انتقالات على نفس العنصر. وأخيرًا، في هذه المقالة توّجنا ما سبق بتعلم كيفية تطبيق هذه الانتقالات باستخدام JavaScript. الانتقالات ليست سوى جزء بسيط من التحريك في CSS. سنغطي في المقالات اللاحقة الخاصية animation. تمرين قبل أن ننتقل إلى الخاصية animation، خذ بعض الوقت للتفكير في كيفية استخدام الانتقالات. هل يمكنك التفكير في طرق يمكن أن تساعد بها الانتقالات على تسهيل التفاعلات، أو تغييرات الحالة على صفحاتك؟ كيف يمكنها أن تضيف جاذبية إلى تصميمك؟ المصادر ترجمة وبتصرف للفصل transitions and javascript من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة التالية: تطبيق عملي: التحريكات المقالة السابقة: الانتقالات المتعددة