البحث في الموقع

سنتعلم في هذه الفقرة كيفية إنشاء تحريكات 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. اقرأ أيضًا المقالة التالية: مدخل إلى الانتقالات: التنقل بين الحالات المقالة السابقة: ما هي استخدامات الحركات؟ النسخة العربية الكاملة من كتاب: التحريك عبر CSS

هنيئًا لك، لقد أنهيت سلسلة أساسيات التحريك في CSS. آمل أن تكون قد استمتعت واستفدت منها. قبل أن نُنهي هذه السلسلة، سنستعرض سويةً بعض المصادر المفيدة للتعمق أكثر في عالم الحركات. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات الحركات؟ تجهيز بيئة العمل لإنشاء الحركات مدخل إلى الانتقالات: التنقل بين الحالات مدخل إلى الحركات: مفهوم الحركة تطبيق عملي: الانتقالات خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاسكربت تطبيق عملي: التحريكات خاصيات الحركات تطبيق عملي: الإطارات المفتاحية الحركات المتعددة المتزامنة موجز الحركات رواية القصص عبر الحركات حرب النجوم إظهار المحتوى أثناء التمرير سهولة الوصول نهاية الرحلة ملخص التحريك في CSS لقد أعددت ملخصًا عن الانتقالات والحركات (بصيغة PDF) يلخص خاصياتها. وقد صممته ليناسب صفحة واحدة بحجم A4. أدوات مساعدة لإنشاء الحركات من الجيد أن تعرف كيفية إنشاء الحركات والانتقالات بنفسك، ولكن يكون في بعض الأحيان من الأسهل إنشاؤها بالاعتماد على بعض المنصات الحالية. إليك بعض الأدوات الممتازة التي يمكنك استخدامها لتوفير الوقت وإنشاء الحركات بسرعة. الإطار Animate.css يمكنك الإشارة إلى ملف CSS الخاص بالإطار Animate.css، وإضافة أيّ من أصناف الحركات الجاهزة إلى العناصر المراد تحريكها. إليك مثالًا عن استخدام Animate.css. الإطار Hover.css يعد الإطار Hover.css بديلاً جيدًا عن Animate.css، إذ يوفر مجموعة كبيرة من الحركات الجاهزة لتطبيقها على الروابط أو الأزرار أو الشعارات أو أي عنصر من عناصر HTML. أدوات أخرى إنشاء الحركات عبر CSS وسيلة قوية جدًا، ويمكنها تحقيق الكثير دون الحاجة إلى اللجوء إلى تقنيات أخرى مثل JavaScript. ومع ذلك، فقد لا تكون هذه الوسيلة مناسبة لجميع الحالات. في بعض الأحيان، ستحتاج إلى حركات أعقد، ويمكن آنذاك الاستعانة بلغة JavaScript. تعتمد أفضلُ الحزم على CSS للاستفادة من سرعتها، ودعم المتصفحات لها. منصة GSAP منصة GSAP (Greensock Animation)‎ هي طريقة قائمة على JavaScript لإنشاء حركات متقدمة، وتوفر تحكمًا دقيقًا، وأداءً رائعًا. هذه الأداة تتطلّب بعض الوقت لتعلمها، لكنها مفيدة ونافعة. الإطار Snabbt.js الإطار Snabbt هو وسيلة قوية وفعّالة لإنشاء حركات معقدة باستخدام دوال توقيت مخصصة. إذ ينشئ مصفوفات تحويل (transform matrices) ليستخدمها المتصفح في تحريك الحركات، لهذا يتميز بأداء جيد جدًا. الإطار CSS Animate الإطار CSS Animate هو أداة ممتازة لإنشاء إطارات تحريك المفتاحية. فهو يساعد على تصميم الحركات عن طريق سحب العناصر، واستخدام مقاربة زمنية مفيدة. موقع Cubic-bezier.com عندما ترغب في إضفاء الحيوية على دوال التوقيت، فإنّ موقع Cubic-bezier.com هو الأداة الأفضل لذلك. إذ يساعد على تخصيص دوال التوقيت. وقد تم تصميم أداة مشابهة في أدوات المطور في المتصفح Chrome. ماذا بعد؟! السؤال الذي قد يساورك الآن هو: «ماذا أفعل للانتقال إلى مستوى متقدم في مجال التحريك؟» اقتراحي لك هو البحث عن التحديات. ابحث عن الإلهام في مواقع مثل Dribbble.com أو CodePen.io. استوحي الأفكار من المنتجات الشهيرة (كثيرًا ما أعيد تصميم تصميمات Apple) أو الأفلام أو البرامج التلفزيونية. هل يمكن محاكاتها والاستفادة منها في تصميم المواقع؟ هل ستكون لغة CSS هي الطريقة الأنسب للقيام بذلك؟ اسأل نفسك وابحث عن الإجابات بحثًا دقيقًا، فالبحث هو عماد التَعلُّم. توفر أيضًا أكاديمية حسوب الكثير من المحتوى حول مختلف تقنيات CSS، بما فيها تقنيات التحريك. جمعت لك جميع الدروس التطبيقية المتعلقة بالحركات وإنشائها تجدها في هذا المقال الشامل الذي يتحدث عن التحريك في CSS يزودك بجميع المقالات والدروس النظرية والتطبيقية المتوافرة في الأكاديمية. إن أردت ألا يضيع منك ما تعلّمته في هذه السلسلة، فعليك بالممارسة والتمرين. ابحث عن مواضع مناسبة لاستخدام التحريك، وابحث عما يثير اهتمامك. وحاول الاستمتاع أثناء التعلم، فذلك سيجعله أسهل. هنيئًا لك على الانتهاء من هذه المقدمة عن إنشاء الحركات عبر CSS! آمل أنك استمتعت بها واستفدت منها. إضافة الحركات ستجعلك مصممًا أفضل، وتجعل مشاريعك متميزة وجذابة. المصادر ترجمة وبتصرف للفصل now you know css animation من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة السابقة: قابلية الوصول المرجع الشامل إلى التحريك عبر CSS النسخة العربية الكاملة من كتاب: التحريك عبر CSS

تعلّمنا في المقالات السابقة مفهوم التحريك وكيفية إنشاء الحركات. قبل إنهاء هذه السلسلة، سنتريَّث قليلًا للتفكير فيما يمكننا القيام به للتأكد من أنَّ الزائرين سيستفيدون من الحركات التي نضعها في مواقعنا. هناك العديد من الطرق التي يمكن أن تساعد بها الحركات في عرض المحتوى، لكنها قد تكون مصدر إزعاج ومشاكل في بعض الأحيان. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات الحركات؟ تجهيز بيئة العمل لإنشاء الحركات مدخل إلى الانتقالات: التنقل بين الحالات مدخل إلى الحركات: مفهوم الحركة تطبيق عملي: الانتقالات خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاسكربت تطبيق عملي: التحريكات خاصيات الحركات تطبيق عملي: الإطارات المفتاحية الحركات المتعددة المتزامنة موجز الحركات رواية القصص عبر الحركات حرب النجوم إظهار المحتوى أثناء التمرير سهولة الوصول نهاية الرحلة التأكد من سهولة الوصول إلى المحتوى حرّكنا في بعض الأمثلة المحتوى لإظهاره على الشاشة. إن كان المحتوى مخفيًا في البداية، فمن الضروري التنبّه إلى أنَّه لن يكون مخفيًا بالنسبة لبعض المستخدمين. أي يجب التأكد من وصول قارئات الشاشة إلى المحتوى المخفي بالنسبة لكفيفي البصر على سبيل المثال لا الحصر. تدعم المتصفحات القديمة الحركات المصممة عبر CSS بدرجات متفاوتة، وقد لا تعمل JavaScript دائمًا (أي لا تكون مفعَّلة على جميع المتصفحات). يمكننا استخدام أدوات مثل Modernizr لتجاوز مثل هذه المشكلات. نستخدم الحركات لإضفاء معانِي معيّنة على تصميماتنا. عند تصميم الحركات، ضع في حساباتك أنّ بعض الأشخاص لن يتمكنوا من رؤيتها. فربما يستخدمون قارئ الشاشة (screen reader)، أو أنَّ إعدادات متصفحاتهم تمنع عمل الحركات بالشكل المطلوب. تأكد من توفر المعلومات المهمة حتى في حال لم تعمل الحركة. كما أنّ التشغيل الفيديو تلقائيًّا قد يكون مصدر إزعاج لبعض المستخدمين، ويمكن أن تؤدي الحركات التي تعمل تلقائيًا إلى تشتيت الانتباه عن بعض محتويات الصفحة. حاول حصر استخدام الحركات في المواقف التي تريد من زوّاك أن يركِّزوا على محتوى معين. قد يعني هذا أيضًا تحديد المدة التي تستغرقها الحركة، أو التأكد من توقفها حتى يركِّز الزائر على محتويات أخرى. إتاحة التحكم توصي منظمة W3C بأن يكون لأي محتوى يومض (blinking)، أو يُمرَّر، أو يُحدَّث تلقائيًا لمدة تزيد عن 5 ثوانٍ وسيلة لإيقاف الحركة مؤقتًا، أو إزالتها. يُعد استخدام الخاصية animation-play-stat إحدى طرق إيقاف الحركة عند الحاجة، كما هو موضح هنا عند التمرير. إتاحة مدخلات بديلة يستخدم نسبة كبيرة من زوار موقعك الهواتف التي لا تحوي مؤشر (فأرة)، ولا توجد بها حالة حومان (hover state)، لذا من المهم أخذ هذا في الحسبان عند التصميم. أحد الخيارات التي أستخدمها غالبًا هو رصد النقرة (tap) وإضافة الصنف "active" إلى العنصر المنقور. بعد ذلك أُضيف الانتقالات أو الحركات إلى الحالات '‎:hover' و '‎.active'. الارتباك في بعض الأحيان، تبالغ بعض المواقع عبر تحريك كل شيء. هذا لن يقوَض رسالة الموقع فحسب، بل يمكن أن يسبب ارتباك الزائر. هذا ينطبق بشكل خاص على واجهة المستخدم. عند إضافة حركةٍ إلى عناصر الصفحة التي يتفاعل معها الزوار، تأكد من أنّ هناك سببًا وجيهًا لاستخدام الحركات. لا يملك الزوار الوقت الكافي لتفكيك شيفرات ورموز التصميمات المعقدة المرئية أو الطريقة التي تتحرك بها، لذلك تحرّى الوضوح والبساطة قدر الإمكان. لا تزعجني المبالغة في تطبيق الحركات أو استخدام النوع الخاطئ منها يمكن أن يزعج الناس. عندما قدمت Apple نظام التشغيل iOS7، وهو نظام تشغيل مُحدَّث لهواتفها، أدخلت فيه الكثير من الحركات. بعضها كان مزعجًا. وقد كافح بعض الأشخاص، مثلي، للقراءة في السيارة أو الحافلة، لأنّ الحركة كانت مربكة، وآخرون عجزوا عن لعب ألعاب فيديو معينة لأكثر من بضع دقائق. سبب حدوث ذلك يرجع إلى الطريقة التي يعمل بها نظامنا الدهليزي. لدينا 3 أنابيب في آذاننا تساعدنا على تحديد مكان رأسنا في الفضاء ثلاثي الأبعاد. من الممكن أن نخدع عقولنا ونوهمها بأننا نتحرك، بيْد أنّ المشكلة هي أنه عندما لا يحسّ النظام الدهليزي بتلك الحركة، وسنشعر آنذاك بالدوار والارتباك. التقيؤ عملية معقدة، وهناك جزء من أدمغتنا متخصص في التعامل معه. يقع هذا الجزء من الدماغ بالقرب من الجزء الذي يتعامل مع التوازن، ولهذا نشعر بالغثيان. يمكن أن يصبح هذا مشكلة أكبر مع تطور وانتشار التكنولوجيا القابلة للارتداء. تأكد عند تصميم الحركات من اختبار مدى ارتياح وتقبّل الناس لها. بعض الحلول أن تجرب الحركات التي تصممها مع أصدقائك وتأخذ رأيهم بها. يُعد موقع Vestibular.org نقطة انطلاق ممتازة للتعمق أكثر في هذا الموضوع. تسهيل الوصول للجميع قابلية الوصول ليست نافعة للأشخاص الذين يستخدمون قارئات الشاشة، أو وسائل بديلة لتصفح المحتوى وحسب. فكثيرًا ما يتشتت انتباهنا، إذ ينقطع ااتصال الشبكة، أو نتفحص هواتفنا أُثناء الانتظار في طابور مكتب البريد، أو نتفحص الاتجاهات أثناء القيادة. يجب أن ننتبه إلى الطرق التي قد يستخدم بها الناس مواقعنا، ونحرص على ألّا تكون الحركات التي ننشئها مزعجة أو مربكة لهم. تمرين إذا كانت وظيفتك تتضمن تصميم أو بناء واجهات لاستخدامها من قِبل الناس، فخصص بعض الوقت لقراءة NNGroup’s Animation for Attention and Comprehension. فكر في الكيفية التي قد يستخدم بها الناس موقعك، وما المشاكل التي قد يواجهونها إذا لم يتمكنوا من رؤية الحركات. المصادر ترجمة وبتصرف للفصل accessibility من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة التالية: نهاية الرحلة المقالة السابقة: إظهار المحتوى عند التمرير النسخة العربية الكاملة من كتاب: التحريك عبر CSS

من الاستخدامات الشائعة للحركات تحريك العناصر عند تمرير (scrolling) لأسفل الصفحة، لذلك سنتعلم في هذه المقالة كيفية القيام بذلك. إليك المثال التوضيحي الذي سنعمل عليه. حاول التمرير لأسفل الصفحة، وانظر كيف تظهر الاقتباسات وصور القطط في مكانها. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات الحركات؟ تجهيز بيئة العمل لإنشاء الحركات مدخل إلى الانتقالات: التنقل بين الحالات مدخل إلى الحركات: مفهوم الحركة تطبيق عملي: الانتقالات خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاسكربت تطبيق عملي: التحريكات خاصيات الحركات تطبيق عملي: الإطارات المفتاحية الحركات المتعددة المتزامنة موجز الحركات رواية القصص عبر الحركات حرب النجوم إظهار المحتوى أثناء التمرير سهولة الوصول نهاية الرحلة الإطار Wow.js تعرض العديد من المواقع حركات مخصصة عند تمرير الصفحة إلى نقاط معينة. يمكن أن تبدأ بتشغيل مقطع فيديو، أو تشغيل إطارات تحريك مفتاحية معقدة، أو جعل بعض العناصر تظهر بالتدريج للفت الانتباه إليها. في جميع تلك الحالات، تُستخدم بعض شيفرات JavaScript، والتي تضيف صنفًا إلى عنصر معيّن عندما يصبح مرئيًا على الشاشة. يمكننا بعد ذلك إرفاق حركات مخصصة بذلك الصنف بشكل يؤدي إلى بدء المتصفح الحركة في الوقت المناسب الذي يظهر فيه العنصر أمام القارئ (الزائر). هناك العديد من خيارات JavaScript التي يمكن أن تضيف أصنافًا، وأحد أفضل هذه الخيارات الإطار Wow.js. سنستخدمه لإنشاء مثال بسيط يظهر فيه المحتوى تدريجيًا أثناء التمرير. استخدام Wow.js استخدام Wow.js يستلزم خطوتين. الخطوة الأولى هي تنزيل إضافة JavaScript. ضع الملف wow.min.js بعد تنزيله في مجلد JavaScript الخاص بالمشروع. الخطوة التالية هي الإشارة إلى هذا الملف من داخل شيفرة HTML: <script src="javascripts/wow.min.js"></script> (بافتراض أن المجلد يسمى javascripts - غيّره إلى الاسم المناسب) بعد ذلك، سنستدعي JavaScript باستخدام هذه التعليمة (الصقها بعد الشيفرة السابقة): <script> new WOW().init(); </script> يمكننا الآن إضافة الصنف "wow" إلى المحتوى، وسوف يكتفل الإطار Wow.js بتحديد ما إذا أصبح المحتوى مرئيًّا على النافذة أم لا لإظهاره بحركة لافتة. إضافة أصناف "wow" إن أردت تحريك عنصر معيّن عند التمرير، فأضف إليه الصنفَ wow: <p class="wow">...</p> هذا يعني أنه عندما يظهر العنصر في نافذة المتصفح أثناء التمرير للأسف ويصبح مرئيًّا، تضيف Wow.js الصنّف animated إلى المحتوى على النحو التالي: <p class="wow animated">...</p> إن أضفنا حركة مخصصة على العناصر p.animated (أي العناصر p ذات الصنف animated)، فلن تعمل الحركة إلا عند إضافة هذا الصنف. الإخفاء والعرض في مثالنا، سنخفي جميع العناصر ذات الصنف wow، وسنعرضها عندما يُضاف لها الصنف animated. أولاً، سنخفيها عبر الشيفرة التالية: .wow { opacity: 0; transition: all 0.5s 0.5s ease-out; } سنُطبِّق أيضًا عملية انتقال (transition) هنا حتى يظهر العنصر تدريجيًا. لاحظ القيمة 0.5s، في هذا المثال أضفنا تأخيرُا (delay) لمدة نصف ثانية، يضمن هذا أن يكون العنصر موجودًا في إطار العرض (viewport) قبل أن يبدأ بالظهور التدريجي. تحدد الشيفرة التالية كيف سيبدو العنصر عندما يُضاف إليه الصنف animated: .animated { opacity: 1; } صارت العناصر الآن تظهر ظهورًا تدريجيًّا في أثناء تمرير المستخدم الصفحة إلى الأسفل. شاهد ذلك في المثال الحي. استخدام Animate.css صُمِّم الإطار Wow.js ليتكامل مع إطار العمل Animate.css. لم أستخدمه في المثال حتى الآن لأني أفضِّل أن تفهم كيفية إنشاء الانتقالات بنفسك، لكن هناك بعض الانتقالات الممتازة الجاهزة التي يرفرها لنا الإطار Animate.css. في هذا المثال، استعملت Animate.css. لاحظ أنَّه لا توجد أيَّة حركات أو انتقالات في شيفرة CSS. بدلاً من ذلك، أضفت صنفًا إلى شيفرة HTML لإخبار Animate.css بالحركة الواجب تطبيقها: <section class="image wow bounceInUp"> يشير الصنف bounceInUp إلى أحد الحركات المضمّنة في Animate.css. إن اخترت "cog" في قسم CSS في المثال، فسترى أنني أشرت إلى إطار العمل Animate.css ضمن ملفات CSS الخارجية. استخدام Modernizr من الجيد عمومًا الاحتياط من المواقف التي نخفي فيها المحتوى ثمَّ نظهره باستخدام JavaScript. فبعض المستخدمين لا يشغّلون JavaScript لسبب أو لآخر. يمكن استخدام سكربت مثل Modernizr للتعامل مع هذه المشكلة. سيضيف صنفًا js إلى جسم الصفحة (body)، ويُمكننا بعد ذلك استخدامه في تنسيقاتنا. لقد أضفت Modernizr في هذا المثال فاطلع عليه بتفحُّص. تمرين يُعدُّ إظهار المحتوى تدريجيًّا في مكانه مع تطبيق حركة ما بداية رائعة، ولكن كيف يمكنك استخدام ذلك لتحسين تصميماتك ومواقعك؟ عندما تتصفح الإنترنت، ابحث عن المحتويات التي تظهر مع حركة أثناء التمرير لأسفل الصفحة وحلِّلها وحاول تقليدها. الأهم من ذلك، اسأل نفسك السؤال التالي وحاول الإجابة عليه: متى تكون هذه التقنية نافعة؟ ومتى يُفضل تجنّبها؟ المصادر ترجمة وبتصرف للفصل revealing content on scroll من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة التالية: سهولة الوصول المقالة السابقة: حرب النجوم النسخة العربية الكاملة من كتاب: التحريك عبر CSS

سنطبق ما تعلّمناه في المقالات السابقة، وسنصنع تحريكًا متجِهيًّا (SVG) مرحًا. سنبني عنوان فيلم حرب النجوم من إعلان "The Force Awakens". المصدر: https://www.youtube.com/watch?v=ngElkyQ6Rhs يجمع هذا المثال بين التحريك وبين بعض خاصيات CSS الأخرى، خصوصًا الخاصية transform ودوال تحويلها scale و translate و rotate. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات الحركات؟ تجهيز بيئة العمل لإنشاء الحركات مدخل إلى الانتقالات: التنقل بين الحالات مدخل إلى الحركات: مفهوم الحركة تطبيق عملي: الانتقالات خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاسكربت تطبيق عملي: التحريكات خاصيات الحركات تطبيق عملي: الإطارات المفتاحية الحركات المتعددة المتزامنة موجز الحركات رواية القصص عبر الحركات حرب النجوم إظهار المحتوى أثناء التمرير سهولة الوصول نهاية الرحلة transform: ليست من خاصيات الحركات رغم أنها تبدو وكأنها من خاصيات الحركات، إلا أنّ الخاصية transform تُستخدَم في تحديد موضع، أو انحراف، أو حجم عنصر ما. يمكننا استخدام هذه الخاصية لإنشاء تأثيرات رائعة، ولكن للقيام بذلك، نحتاج إلى تحويل (transform) خاص لكل إطار مفتاحي أو حالة نحركها. الخاصية transform ودوالها‏ scale()‎ و translateZ()‎ و rotateY()‎ بإمكاننا تصغير العناصر أو تكبيرها باستخدام scale. وباستخدام translateZ، يمكننا نقل العناصر على المحور Z، وهو المحور الذي يمثله رسم خط ينطلق منك، ويتجه إلى الشاشة. في هذا المثال، سنستخدم scale و translateZ معًا لخلق شعور بأنّ الكلمات تطير في الفضاء. بعد ذلك، سنستخدم rotateY لتدوير أحرف سطر الوصف. سيتطلب الدوران حول المحور Y قيام المتصفح بالرسم ثلاثي الأبعاد. SVG و HTML و CSS استعدادًا لهذا المثال، قمت بإنشاء ملفين من النوع SVG لأجل الجزئين Star و Wars من الشعار. لا تتردد في تحميلهما واستخدامهما. إليك شيفرة HTML الخاصة بالمثال: <div class="starwars-demo"> <img src="//cssanimation.rocks/demo/starwars/images/star.svg" alt="Star" class="star"> <img src="//cssanimation.rocks/demo/starwars/images/wars.svg" alt="Wars" class="wars"> <h2 class="byline" id="byline">The Force Awakens</h2> </div> لقد استخدمنا صورة ثابتة للنجوم في الخلفية. لم أتمكن من العثور على الخط الذي استُخدِم في الإعلان الأصلي، لذلك استخدمت الخط "Lato". استخدمت التموضع المطلق (absolute positioning) لوضع المحتوى في منتصف الشاشة. سنحصل في البداية على الصورة التالية: تحريك الكلمتين Star و Wars نريد أن يظهر النص الكبير تدريجيًا، إذ يبدأ بحجم كبير، ثمَّ يصغر بمرور الوقت. وهذه فرصة جيدة لاستخدام الدالة scale()‎. سنستخدمها على الكلمة "Star" في الإطارات المفتاحية التالية: @keyframes star { 0% { opacity: 0; transform: scale(1.5) translateY(-0.75em); 20% { opacity: 1; 89% { opacity: 1; transform: scale(1); 100% { opacity: 0; transform: translateZ(-1000em); } هناك خاصيتان تتغيران خلال مسار هذه الحركة وهما opacity و transform. إنّ تغيير العتامة (opacity) يجعل النص يبدأ شفافًا، ثم يتلاشى في النهاية لكي نتمكن من إعادة تنفيذ التحريك. يبدأ التحويل عن طريق تحديد الحجم عند القيمة 1.5. هذا يعني أنّ الحجم الأولي للنص سيكون أكبر بنسبة 150٪ من الحجم العادي. عند النقطة 89٪، سنعيّن الخاصية transform عند القيمة scale(1)‎. هذا يعني أنه بين اللحظتين 0٪ و 89٪، سينتقل الحجم من 150٪ إلى 100٪. التحويل transformZ الأخير يؤدي إلى تكبير الكلمتين بسرعة. بشكل مماثل، يمكننا تطبيق الإطارات المفتاحية على الكلمة "Star": .star { animation: star 10s ease-out infinite; } تم استخدام مجموعة مماثلة من الإطارات المفتاحية مع الكلمة "Wars". لنجعلها ثلاثية الأبعاد يتطلب استخدام التحويلات ثلاثية الأبعاد في CSS، سواء كانت بالتحويل على المحور Z، أو الدوران حول المحورين Y و Z، أن نضع مرحلة ثلاثية الأبعاد. وهذا يعني، في اصطلاح HTML، إنشاء حاوية (container)، وإخبار المتصفح بالحاجة إلى إنشاء بعض التحريكات ثلاثية الأبعاد. يمكننا فعل ذلك عن طريق إضافة الشيفرة التالية إلى العنصر div ذي الصنف ‎.starwars-demo: .starwars-demo { perspective: 800px; transform-style: preserve3d; } تخبر هاتان الخاصيتان المتصفحَ بأنّ أبناء الحاوية (container`s children) ينبغي أن يتموضعوا وفق شكل ثلاثي الأبعاد، بدلًا من وضعهم في مستوى مسطح. يمكنك أن تجد المزيد من التفاصيل عن هذه الخاصية في موقع CSS Tricks. ثانياً، تخبر الخاصية persective المتصفحَ بمدى «عمق» المشهد. في هذا المثال، جعلناها تساوي 800px. تخلق القيم الأصغر تأثيرات «متطرفة» لأنّ المشهد سيكون أقصر. سننسق الآن سطر الوصف. تحريك الشعار "The Force Awakens" تدور أحرف الشعار "The Force Awakens" في مكانها. يمكننا خلق هذا التأثير باستخدام التحويل rotateY. في هذا المثال، قمنا بوضع كل حرف داخل عنصر من النوع span حتى نتمكن من تطبيق التحريك على كل حرف على حدة. إحدى المشكلات التي اكتشفتها سريعًا هي أنه لا توجد طريقة مباشرة لتحريك كل حرف في السطر. الحل الذي بدا لي هو وضع كل حرف يدويًا داخل وسم span. وقد نجح ذلك، ولكنه جعل شيفرة HTML فوضوية قليلا. لذلك استعضت عنها ببعض شيفرات JavaScript التي تضع كل حرف داخل عنصر span تلقائيًا. سنُطبِّق التحريك على كل حرف على حدة. أولًا، الإطارات المفتاحية: @keyframes spin-letters { 0%, 10% { opacity: 0; transform: rotateY(90deg); 30% { opacity: 1; 70%, 86% { transform: rotateY(0); opacity: 1; 95%, 100% { opacity: 0; } في البداية، تكون الحروف مُدوّرة بزاوية 90 درجة، ثم بزاوية 70٪ خلال التحريك، إذ يتم تحريكها لمواجهة المشاهد. يمكننا تطبيق مجموعة الإطارات المفتاحية هذه على كل عناصر span على النحو التالي: .byline span { animation: spin-letters 10s linear infinite; } والنتيجة هي أنّ كل عناصر span التي تحتوي الحروف سوف تظهر تدريجيًا وتدور ببطء في مكانها، قبل أن تتلاشى في نهاية التحريك. بجمع كل ذلك معًا، سنحصل على المشهد التالي: المصدر: http://codepen.io/donovanh/pen/pJzwEw?editors=110 تمرين إذا كان لديك الوقت، أشجعك على إلقاء نظرة على قسم CSS في نسخة CodePen. قد تلاحظ وجود بعض استعلامات الوسائط media في CSS. نستخدم هذه الاستعلامات لتحجيم المثال في الأجهزة الصغيرة. حاول تغيير بعض إطارات التحريك المفتاحية، أو قيم الخاصية transform لمعرفة ما سيحدث. المصادر ترجمة وبتصرف للفصل star wars من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة التالية: إظهار المحتوى عند التمرير المقالة السابقة: رواية القصص عبر الحركات النسخة العربية الكاملة من كتاب: التحريك عبر CSS

تحدثنا في المقالات الماضية عن الخاصيتين transition و animation. سندمجها مع هذه المقالة في عملية التحريك لخلق تأثير التحويم (hover effect). هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات الحركات؟ تجهيز بيئة العمل لإنشاء الحركات مدخل إلى الانتقالات: التنقل بين الحالات مدخل إلى الحركات: مفهوم الحركة تطبيق عملي: الانتقالات خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاسكربت تطبيق عملي: التحريكات خاصيات الحركات تطبيق عملي: الإطارات المفتاحية الحركات المتعددة المتزامنة موجز الحركات رواية القصص عبر الحركات حرب النجوم إظهار المحتوى أثناء التمرير سهولة الوصول نهاية الرحلة الصور الرئيسية تُفضّل العديد من المواقع عرض صورة كبيرة تجذب الانتباه في أعلى الصفحة الرئيسية. تسمى أحيانًا الصورة الرئيسية، أو الصورة البطلة (hero image)، وعادةً ما تسع كاملَ عرض الصفحة. من الأمثلة الجيدة التي وجدتها مؤخرًا هي صفحة الهبوط الخاصة بموقع إطار العمل Fabric، إذ توضِّح عبر حركة بسيطة في CSS وظيفة Fabric كإطار عمل تركيبي (modular). المصدر: https://get.fabric.io/ مثال آخر جيد نجده في الصفحة الرئيسية لموقع Mailchimp إذ تحكي الصورة الرئيسية قصةً توضح كيفية إنشاء رسائل البريد الإلكتروني. المصدر: http://mailchimp.com نجد في هذين المثالين وغيرهما من الأمثلة أنَّه جرى استخدام الحركات لتمثيل خدمات الموقع ببساطة. مثال: تمرير الخلفية سننشئ مثالًا خاصًّا بنا مشابه لما رأيته آنفًا. في هذا المثال، قمت بتصميم رسومات على الصفحة تتحرك لأعلى وأسفل الشاشة. المصدر: http://codepen.io/donovanh/pen/LEwedW?editors=110 لإضفاء طابع التفاعلية، تتوقف الحركة مؤقتًا، وتظهر رسالة عندما يحوم مؤشر الفأرة فوق الشاشة. وقد قمت باستخدام كل من الحركات والانتقالات لتحقيق هذا التأثير. يمكنك الاطلاع على هذا المثال من هنا. الجزء 1: تحريك الخلفية لإعداد هذا المثال، سنبدأ بعنصر HTML حاوي: <div class="screen"></div> يمكننا أن نجعل العنصر screen يبدو وكأنه شاشة أو iPad باستخدام التنسيقات التالية: .screen { background: #e25865 url(//cssanimation.rocks/screen/images/screen_bg.png) no-repeat top center; background-size: 100% auto; border: 2em solid #fff; border-radius: 1em; width: 40em; height: 30em; } لقد أعددنا بعض التنسيقات التي تحدد الحجم والحدود، وتعيّن صورة الخلفية. يعتمد التأثير الذي نريد إنشاءه على تحريك صورة الخلفية. صورة الخلفية أطول من الشاشة، وقيمة خاصيتها background-size تساوي ‎100% auto. هذا يعني أنّ الخلفية ستُناسب عرض الحاوية، ولكنها ستكون أطول منها. بتحديد صورة الخلفية المراد تحريكها، يمكننا الآن كتابة الإطارات المفتاحية التي ستجعلها تبدو وكأنّ شخصًا ما يمرّر (scroll) صفحة الويب: @keyframes scroll { 0%, 10% { background-position: 0 0; } 20%, 30% { background-position: 0 -22em; } 50%, 60% { background-position: 0 -44em; } 90%, 100% { background-position: 0 0; } } الخاصية التي نحركها هي background-position. يمكننا عبر هذه الخاصية تحريك الخلفية لأعلى ولأسفل. إذا تبدأ من الموضع 0 0، ما يعني أنّ المسافة من اليسار، ومن الأعلى ستُساويان الصفر. في الإطارات التالية، جعلنا الخلفية تتحرك إلى أعلى بمقدار ‎22em، ثم ‎44em لأعلى، ثم العودة إلى أعلى الصفحة. سنستخدم الخاصية animation لتطبيق هذا على العنصر screen. .screen { animation: scroll 5s infinite cubic-bezier(.52,-0.39,.3,1.43); } في المثال أعلاه طبقنا مجموعة من الإطارات المفتاحية التي تسمى scroll، وطلبنا منها أن تستمر 5 ثوان، وتتكرر باستمرار، وتستخدم دالة توقيت cubic-bezier. في هذه الحالة، تعطي الدالة cubic-bezier للحركة اهتزازًا، وستبدو الحركة بدونها أقل واقعية. يمكنك أن تجد دالةَ cubic-bezier المستخدمة في المثالِ في الموقع cubic-bezier.com. إذا لم تزر هذا الموقع حتى الآن، فإني أوصي به بشدة! الجزء 2: إضافة انتقال التحويم من المستحسن إيقاف أو تجميد الحركة عند انتهائها، أو عندما تريد أن يركز القارئ على محتوى آخر. التحريك المستمر يمكن أن يتسبب في تشتيت القارئ، لذلك دعنا نستفيد من الخاصية animation-play-state لإيقاف الحركة مؤقتًا عند التحويم على العنصر. .screen:hover { animation-play-state: paused; } هذا يعني أنه عندما يحوم مؤشر الفأٍرة فوق موضع الحركة، سيتوقف مؤقتًا. وعندما يبتعد المؤشر، سوف تُستأنف الحركة وتعود الخاصية animation-play-state لقيمتها الافتراضية playing. يمكنك تحقيق ذلك باستخدام JavaScript أيضًا. يمكن أيضًا استخدام JavaScript لتعطيل الحركة عندما يتفاعل المستخدم مع جزء آخر من الصفحة، أو عندما يمرّر (scroll) الصفحة بعيدًا. سنلقي نظرة على كيفية تمكين الحركة عند التمرير لاحقًا. الجزء 3: إضافة رسالة يمكننا أن نضيف المزيد ونعرض رسالة خاصة بالانتقال عندما يُحوِّم المستخدم فوق العنصر. للقيام بذلك سنحتاج إلى كتابة بعض شيفرات HTML: <div class="screen"> <div class="message">Hover message!</div> </div> في قسم CSS من CodePen، وضعنا هذه الرسالة في منتصف العنصر screen، وجعلناها غير مرئية. .message { /*... positioning styles ...*/ opacity: 0; transition: all 0.4s ease-out; } يمكننا بعد ذلك إظهارها عند التحويم باستخدام الانتقال: .screen:hover .message { opacity: 1; } نظرًا لأننا أضفنا الخاصية transition إلى تنسيق العنصر message، فستحدث الحركة عندما يحوم مؤشر الفأرة فوق العنصر، وكذلك عندما يغادرها. تبدو تأثيرات الحركة والانتقال عند تجميدها كما يلي: المصدر: http://codepen.io/donovanh/pen/LEwedW?editors=110 ملخص في هذه المقالة، قمنا بدمج الحركة والانتقال معًا لإنشاء تأثير يمكن أن يكون مفيدًا في تصميم صفحات الهبوط، أو قصص المنتجات أو إخبار الزائر الغرض من موقعك أو كيفية استخدامه. استخدمنا الخاصية animation-play-state للتأكد من توقف الحركة عندما نريد. تمرين توقف لحظة، وفكّر في كل ما تعلمناه حتى الآن. لقد غطينا الكثير من المواضيع. يُعد الجمع بين الحركة والانتقال وسيلة ممتازة لإضفاء الحيوية على الصفحات. عند التفكير في كيفية تطبيق هذه التقنيات في مشاريعك، فكر في كيفية التحكم فيها أيضًا. حاول أن تعرف متى تكون الحركة مفيدةً للمستخدمين، ومتى تكون عائقًا أو مصدر إزعاج لهم. من الجيد أن تعرف كيف تنشئ الحركة جيدًا، ولكن أفضلُ من ذلك أن تعلم متى تتجنبها. المصادر ترجمة وبتصرف للفصل storytelling من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة التالية: حرب النجوم المقالة السابقة: موجز الحركات النسخة العربية الكاملة من كتاب: التحريك عبر CSS

لقد غطينا الكثير من التفاصيل في المقالات السابقة وأرجو أن يكون كل شيء واضحًا الآن. عندما بدأت تعلم إنشاء الحركات في CSS، لم تكن مفاهيم التحريك والإطارات المفتاحية (keyframes) واضحة لي. إذا شعرتَ أنّ مفاهيم التحريك غير واضحة حتى الآن، فلا تقلق. استمر في الدراسة والتعلم والتجريب، وستتضح شيئًا فشيئًا حيل ومفاهيم التحريكات في HTML و CSS. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات الحركات؟ تجهيز بيئة العمل لإنشاء الحركات مدخل إلى الانتقالات: التنقل بين الحالات مدخل إلى الحركات: مفهوم الحركة تطبيق عملي: الانتقالات خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاسكربت تطبيق عملي: التحريكات خاصيات الحركات تطبيق عملي: الإطارات المفتاحية الحركات المتعددة المتزامنة موجز الحركات رواية القصص عبر الحركات حرب النجوم إظهار المحتوى أثناء التمرير سهولة الوصول نهاية الرحلة سنلخّص في هذه المقالة ما تعلمناه في المقالات السابقة. لكن سنعود أولًا إلى التمرين الذي رأيناه في المقالة الماضية. تمرين: إشارات المرور يُفترض أن يكون التمرين سهلًا. طبعًا على افتراض أنك تعرف كيف تحلّه. لقد أنشأت نسخة محدّثة من مثال إشارات المرور وفق نموذج المملكة المتحدة، إذ غيَّرت التسلسل هذه المرة لإزالة مرحلة "الأحمر + البرتقالي" ليوافق نظام إشارات المرور الأمريكية. يمكنك الاطلاع عليه من هنا. لقد جعلت نظام الألوان يطابق شكل إشارات المرور الأمريكية. موجز: الحركات في هذا القسم، سنلقي نظرة على الخاصية animation، وكيف تعمل مع الإطارات المفتاحية (keyframes). الخاصية transition رغم أنَّ الخاصية animation تعمل بطريقة مشابهة للخاصية transition، إلا أنَّها تختلف عنها قليلًا. ففي حين أنّ الانتقال (transition) لن يحدث الا عند تغيُّر العنصر، فإنّ الحركات (animations) يمكن أن تبدأ مباشرةً. باستخدام مختلف الخاصيات، يمكن تكرار الحركات عددًا معينًا من المرات (أو إلى الأبد)، كما يمكن أن تبدأ بتأخير سالب، وهذا سيبدأ الحركة بعد أن تكون قد بدأت معالجتُها. افتراضيًا، تحدث الحركات من البداية إلى النهاية، ثم تقفز إلى حالتها الافتراضية. يمكننا تجميد الحركة في حالتها النهائية بإعطاء الخاصية animation-direction القيمةَ forwards. تستخدم الحركات دوال التوقيت مثلها مثل الانتقالات. بيْد أنّ دوال التوقيت تنطبق على كل إطار رئيسي على حدة، وليس على كامل مجموعة الإطارات المفتاحية. يمكنك أيضًا تحديد قيمة animation-timing-function داخل الإطار المفتاحي لتتحكم بشكل أدق في الحركة. أخيرًا، يمكن صياغة الحركات بشكل مختصر كما هو الحال مع الانتقالات: animation: keyframe-name 2s forwards linear; الإطارات المفتاحية من الضروري أن تشير كل حركة إلى مجموعة من الإطارات المفتاحية (keyframes). هذه الإطارات هي عبارة عن سلسلة من النسب المئوية التي تصف كل "مرحلة" من مراحل الحركة. سيملأ المتصفح الفجوات تلقائيًا. الإطارات المفتاحية لها اختصاراتها الخاصة (to و from)، والتي يمكنك استخدامها عندما تريد الاكتفاء بالانتقال من حالة إلى أخرى. يمكن أن يؤدي سرد النسب المئوية بجانب بعضها بعضًا إلى "توقف" الحركة في تلك المرحلة. أخيرًا، من الممكن حذف الإطار المفتاحي ‎0%، وسوف يفترض المتصفح حينها أنّ تنسيق العنصر هو الحالة الابتدائية. على سبيل المثال، لجعل عنصر ما يتلاشى (fade away)، لا يلزم بالضرورة أن تكون قيمة عتَامته (opacity) مساوية لـ 1 في البداية (على افتراض أنّ العنصر مرئي): @keyframes name { 100% { opacity: 0; } } تجميع الحركة عندما نريد استخدام الحركة، سيكون لدينا دائمًا الجزءان التاليان: .element { animation: keyframe-name ... } @keyframes keyframe-name { ... } تمرين في هذه المرحلة، يجب أن تكون قادرًا على التفريق بين خاصيتي الحركة (animation) والانتقال (transition). ألق نظرة على أمثلة Principles of Animation for the Web. كل تلك الأمثلة مصنوعة حصرًا باستخدام HTML و CSS، وذلك باستخدام إطارات الحركة المفتاحية. حاول أن تنسخها، وقُم بالتجريب والتعديل عليها. المصادر ترجمة وبتصرف للفصل animation recap من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة التالية: رواية القصص عبر الحركات المقالة السابقة: الحركات المتعددة المتزامنة النسخة العربية الكاملة من كتاب: التحريك عبر CSS

سنتحدث في هذه المقالة عن كيفية استخدام عدة مجموعات من الإطارات المفتاحية (keyframes) تعمل بشكل متزامن لتوليد حركة معقدة مؤلفة من عدة حركات. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات الحركات؟ تجهيز بيئة العمل لإنشاء الحركات مدخل إلى الانتقالات: التنقل بين الحالات مدخل إلى الحركات: مفهوم الحركة تطبيق عملي: الانتقالات خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاسكربت تطبيق عملي: التحريكات خاصيات الحركات تطبيق عملي: الإطارات المفتاحية الحركات المتعددة المتزامنة موجز الحركات رواية القصص عبر الحركات حرب النجوم إظهار المحتوى أثناء التمرير سهولة الوصول نهاية الرحلة إشارة المرور في بعض الأحيان، قد نرغب في مزامنة عدة حركات، بشكل يكون لكل حركة توقيتها الخاص. من الأمثلة الجيدة على هذا إشارة المرور. لدينا هنا نموذج بسيط لإشارة المرور (في المملكة المتحدة): المصدر: http://codepen.io/donovanh/pen/ogRRdR?editors=010 لدينا ثلاثة مصابيح، وكل منها يضيء وينطفئ بنمط خاص به. يمكننا إنشاء هذا عن طريق إعطاء كل مصباح حركةً خاصَّةً به. .red { animation: red 10s linear infinite; } .amber { animation: amber 10s linear infinite; } .green { animation: green 10s linear infinite; } لدينا ثلاثة حركات، واحدة لكل مصباح. مدة كل حركة متساوية للجميع، لذلك ستبقى الحركات متزامنة أثناء تكرارها الدوري. لأجل المتابعة سنحتاج إلى تحديد الإطارات المفتاحية. أثناء إنشاء هذا المثال، وجدت أنه من المفيد النظر إلى المصابيح كشبكة (grid). تحدث الحركات من اليسار إلى اليمين، إذ أنّ كل مصباح سيكون إما في حالة انطفاء أو إضاءة في كل لحظة. مخطط يوضح زمن تشغيل وإطفاء كل ضوء من أضواء إشارة المرور. تنقسم الشبكة إلى 5 أعمدة. هذا يعني أنه يمكننا التعامل مع "أخماس" كل منها تستغرق ‎20% من مدة الحركة، وإنشاء مجموعات الإطارات المفتاحية من تلك الأخماس. بأخذ كل مصباح على حدة، يمكننا أن نبدأ بالمصباح الأحمر. حيث سيكون مضيئًا في الخُمس الأول والثاني، ثم سينطفئ في بقية مراحل الحركة. الإطارات المفتاحية الناتجة هي كالتالي: @keyframes red { 0% { background: black; } 2%, 40% { background-color: red; } 42%, 100% { background: black; } } لقد أضفت فجوة بقيمة ‎2% في البداية، وجعلت الجزء الثالث من الحركات يبدأ عند اللحظة 42%، لأنّ هذا سيضيف تأثير التلاشي على إشارة المرور. مثل هذه الأشياء الدقيقة هي التي تصنع فرقًا :). مع إضاءة المصباح الأحمر، يُنتظر أن يضيء المصباح البرتقالي على الشبكة. المصباح البرتقالي سيكون منطفئًا في البداية، ثم سيضيء خلال الخمس الثاني، ثم ينطفئ خلال الخُمسَين التاليين، ثم يضيء في الخمس الأخير. الإطارات المفتاحية لهذا المصباح هي: @keyframes amber { 0%, 20% { background: black; } 22%, 40% { background: #FF7E00; } 42%, 80% { background: black; } 82%, 100% { background: #FF7E00; } } أما المصباح الأخضر، فسيكون منطفئًا خلال الخُمسَين الأوليَين، ثم يضيء خلال الخُمسَين التاليين، ثم ينطفئ في الخُمس الأخير. @keyframes green { 0%, 40% { background: black; } 42%, 80% { background: green; } 82%, 100% { background: black; } } يمكنك مطالعة المثال كاملًا من هنا. مراجع أخرى لمعرفة المزيد عن صياغة الإطارات المفتاحية، راجع المقال «صياغة الإطارات المفتاحية للحركات». تمرين قد يبدو مثال إشارة المرور غريبًا بالنسبة لك لأنه يتبع نموذج المملكة المتحدة. هل يمكنك تعديله ليتناسب مع نموذج إشارات المرور في بلدك؟ حسنًا، ليكن ذلك تمرين هذا القسم. المصادر ترجمة وبتصرف للفصل multiple animations من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة التالية: موجز الحركات المقالة السابقة: تطبيق عملي: الإطارات المفتاحية النسخة العربية الكاملة من كتاب: التحريك عبر CSS

اطّلعنا في المقالة السابقة على خاصيات الحركات، ورأينا كيف أنَّها تعتمد على الإطارات المفتاحية (keyframes). سنلقي في هذه المقالة نظرة أعمق على الإطارات المفتاحية. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات الحركات؟ تجهيز بيئة العمل لإنشاء الحركات مدخل إلى الانتقالات: التنقل بين الحالات مدخل إلى الحركات: مفهوم الحركة تطبيق عملي: الانتقالات خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاسكربت تطبيق عملي: التحريكات خاصيات الحركات تطبيق عملي: الإطارات المفتاحية الحركات المتعددة المتزامنة موجز الحركات رواية القصص عبر الحركات حرب النجوم إظهار المحتوى أثناء التمرير سهولة الوصول نهاية الرحلة أساسيات قبل أن نخوض في مثال عملي، هناك بعض الأشياء التي أود تغطيتها بخصوص الإطارات المفتاحية. الأول، هو صياغة بديلة قد تراها في بعض الشيفرات، وتستخدم الكلمات from و to. @keyframes name { from { ... } to { ... } } هذه الطريقة البسيطة يمكن أن تكون بديلًا عن كتابة ‏0% و ‏100%، وقد تكون أسهل للفهم، ومناسبة للحركات البسيطة. قد تلاحظ أحيانًا استخدام أكثر من نسبة مئوية واحدة على نفس السطر. هذه الصياغة تجعل الحركة تتوقف لفترة من الزمن، أو تستقر على حالة معينة. مثلا: @keyframes name { 0%, 20% { opacity: 0; } 100% { opacity: 1; } } في هذا المثال، سيبدأ العنصر بتعتيمٍ (opacity) يساوي 0، وسيظل غير مرئي حتى انقضاء 20٪ من توقيت الحركة، ثم ستبدأ قيمة العتامة بالتحرُّك تُجاه القيمة 1. سنستخدم هذا في المقالة اللاحقة لمزامنة الحركات. مثال: تأثير اهتزاز الزر Save هل تذكر مثال الزر "Save" من المقالة الأولى؟ دعنا نعيد النظر في هذا المثال، وننظر في كيفية استخدام الإطارات المفتاحية keyframes إلى جانب الخاصية animation لإنشاء تأثير الاهتزاز. المصدر: http://codepen.io/donovanh/pen/KwEQdQ قبل إضافة أي حركة، فقد نسّقتُ الزر لجعله يبدو مثل زر CodePen. حيث جعلت له حدًّا برتقاليًا في الأعلى، وتدرّجًا داكنًا، وجلعت لون النص فيه أبيضًا. وقد استخدمت التموضع المطلق (absolute positioning) في المثال للتأكد من أنّ الزر سيكون في منتصف الشاشة. أول ما أفعله عمومًا هو تطبيق الخاصية animation على العنصر على النحو التالي: button { animation: wiggle 2s linear infinite; } في هذه الحالة، سنطبّق مجموعة من الإطارات المفتاحية تحمل الاسم wiggle، وستمتد الحركة لمدة ثانيتين باستخدام دالة التوقيت linear. كما سنستخدم أيضًا قيمة جديدة، وهي infinite. القيمة infinite هنا تخص الخاصية animation-iteration-count. افتراضيًا، ستتكرر الحركة مرة واحدة فقط، ولكن يمكننا أن نجعلها تتكرر عددًا محددًا من المرات أو تتكرر إلى الأبد. في مثالنا هذا، سوف تتكرر الحركة عددًا غير محدود من المرات. بعد ذلك، سنحدد الإطارات المفتاحية الخاصة بحركة "الاهتزاز". وها هي النتيجة: @keyframes wiggle { 0%, 7% { transform: rotateZ(0); } 15% { transform: rotateZ(-15deg); } 20% { transform: rotateZ(10deg); } 25% { transform: rotateZ(-10deg); } 30% { transform: rotateZ(6deg); } 35% { transform: rotateZ(-4deg); } 40%, 100% { transform: rotateZ(0); } } لقد أعطينا المتصفح سلسلة من النقاط المرحلية (waypoints) ليُحرِّك العنصر بينها. يُدوَّر الزر "Save" عند كل نقطة على المحور z. تبدأ الزوايا واسعةً، ثم تصغُر خلال الحركة. إليك كيف تميل الحركة الزر للخلف وللأمام مع مرور الوقت: المصدر: http://codepen.io/donovanh/pen/pvXJqp يمكننا أن نرى أنّ المتصفح ينشئ الخطوات الفاصلة بين الإطارات المفتاحية. وبدون الاعتماد على دوال التوقيت المعقدة، نجحت هذه الحركة في إضافة الكثير من التميز إلى الزر. يمكنك مطالعة مثال زر "Save" على CodePen. تمرين لقد أنشأت مشروع CodePen جديد يتضمن عنصرًا متحركًا واحدًا. حيث يستخدم animation-timing-function داخل الإطارات المفتاحية، مع سلسلة من الإطارات المفتاحية التي تخلق حركة معقدة نسبيًا. ما الذي سيحدث عند حذف بعض الإطارات؟ أو عند تغيير النسب المئوية؟ هل يمكنك جعل المكعب يتحرّك بشكل مختلف؟ اختر شكلًا بسيطًا، وحاول إضفاء صبغة من الحيوية عليه! المصادر ترجمة وبتصرف للفصل keyframes in action من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة التالية: الحركات المتعددة المتزامنة المقالة السابقة: خاصيات الحركات النسخة العربية الكاملة من كتاب: التحريك عبر CSS

قبل إعطاء المزيد من أمثلة التحريك، دعونا نلقي نظرة على خاصيات التحريك أولًا. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات الحركات؟ تجهيز بيئة العمل لإنشاء الحركات مدخل إلى الانتقالات: التنقل بين الحالات مدخل إلى الحركات: مفهوم الحركة تطبيق عملي: الانتقالات خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاسكربت تطبيق عملي: التحريكات خاصيات الحركات تطبيق عملي: الإطارات المفتاحية الحركات المتعددة المتزامنة موجز الحركات رواية القصص عبر الحركات حرب النجوم إظهار المحتوى أثناء التمرير سهولة الوصول نهاية الرحلة على غرار الخاصية transition، يمكن كتابة الخاصية animation باستخدام الصياغة المختزلة، أو يمكن تحديد أي من هذه الخاصيات بشكل منفرد. الخاصية animation-delay بشكل مشابه للخاصية transition-delay، يمكننا استخدام هذه الخاصية لجعل الحركة تنتظر قبل البدء. قد يكون ذلك مفيدًا في المواقف التي تحدث فيها عدة حركات. إذا كانت الحركات تتكرر بشكل دوري، فلن ينطبق التأخير إلا على المرة الأولى. كما لن ينطبق التأخير سوى عند تطبيق الحركة على العنصر. من الممكن إعطاء هذه الخاصية قيمة سالبة، مثل ‎-1s. سيؤدي ذلك إلى بدء الحركة كما لو أنّه قد مرّت ثانية من الزمن سلفًا. الخاصية animation-direction الحركات عادة ما تبدأ من 0٪ وتنتهي عند 100٪، حيث تمثل 0٪ نقطة بداية الحركة، وتمثل 100٪ نقطة النهاية. تأخذ الخاصية animation-direction القيم normal و reverse و alternate و alternate-reverse ، وتُستخدم للتحكم في اتجاه الحركة. تؤدي القيمة reverse إلى جعل الحركة تحدث (وتدور) بشكل معكوس، أي من 100٪ إلى 0٪، بينما تجعل القيمة alternate الحركةَ تحدث من 0٪ إلى 100٪، وتعود مرة أخرى إلى 0٪. الخاصية animation-duration تمثل هذه الخاصية طول الحركة. على غرار transition-duration، تأخذ هذه الخاصية قيمة مثل 1s، التي تمثل ثانية واحدة، أو 200ms، التي تمثل مئتي ميلي ثانية. الخاصية animation-fill-mode بشكل افتراضي، بعد انتهاء التحريك سيعود العنصر إلى حالته الطبيعية. باستخدام animation-fill-mode يمكننا جعل الحركة تتجمد إما على الحالة النهائية، أو على حالة البداية. يؤدي استخدام القيمة forwards إلى جعل الحركة تنتهي وتتوقف عند الإطار الرئيسي الأخير. فيما تعود القيمة backwards إلى الإطار الرئيسي الأول عندما تنتهي الحركة. يمكنك مطالعة هذا المثال على Hop.ie. تحدث الحركة مرة واحدة، وتنتهي عند الإطار الأخير. وذلك بسبب استخدام القيمة forwards. الخاصية animation-iteration-count تمثل هذه الخاصية عدد مرات إجراء الحركة. افتراضيًا، ستُنفَّذ الحركة مرة واحدة. يمكنك تحديد رقم معيّن، أو استخدام القيمة infinite لتكرار تنفيذ الحركة إلى الأبد. الخاصية animation-name تشير الخاصية animation-name إلى الإطارات المفتاحية المرتبطة بالحركة. على سبيل المثال، إذا تم تعيين animation-name عند القيمة foo، فسيتم استخدام مجموعة الإطارات المفتاحية ذات الاسم foo المُعرّفة على النحو التالي: @keyframes foo { ... } الخاصية animation-play-state إذا احتجت إلى إيقاف الحركة مؤقتًا أو استئنافها، تتيح لك هذه الخاصية القيام بذلك. تأخذ هذه الخاصية إحدى القيمتين running (القيمة الافتراضية) أو paused. يمكن تعيين قيمة هذه الخاصية باستخدام JavaScript. الخاصية animation-timing-function تأخذ هذه الخاصية نفس القيمة التي تأخذها الخاصية transition-timing-function، ولكن مع اختلاف طفيف. فبينما تنطبق دوال التوقيت، مثل ease-out، على عملية الانتقال (transition) بأكملها، تنطبق دالة التوقيت الخاصة بالتحريك (animation) بين الإطارات المفتاحية. هذا يعني أنّ الإطارات المفتاحية التالية ستشهد بداية سريعة للحركة ثم تتباطأ الحركة مع الاقتراب من 50٪، ثم تُسرَّع من جديد قبل أن تتباطأ مع الاقتراب من 100٪. @keyframes foo { 0% { /* ease-out التحريك يبدأ بسرعة ثم تجعله الدالة % يتباطأ مع الاقتراب من 50 */ } 50% { /* مجددا يبدأ بسرعة ثم يتباطأ مع الاقتراب من %100 */ } 100% { /* النهاية*/ } } هذا يمكن أن يكون مربكًا. أُفضّل عند إنشاء الحركات عبر الإطارات المفتاحية العمل بدالة التوقيت linear، ثم أتحكم في وتيرة الحركة باستخدام الإطارات المفتاحية. رغم ذلك، فإنّ دوال التوقيت cubic-bezier يمكن أن تخلق بعض التأثيرات الرائعة عند استخدامها مع الحركات، لذلك جرّبها. استخدام دوال التوقيت ضمن الإطارات المفتاحية تجدر الإشارة إلى أنه عند تحديد دالة التوقيت الخاصة بالحركة، فستنطبق دالة التوقيت على كل إطارات الحركة المفتاحية. هذا يعني أنه إذا أردت تحديد أربع إطارات مفتاحية، فستطُبّق دالة التوقيت على كلٍّ منها. فمثلًا، سوف تبطِّئ دالة التوقيت ease-out الحركة عند الاقتراب من نهاية كل إطار مفتاحي. لهذا السبب، عادةً ما يُفضل استخدام دالة التوقيت linear، والتحكم في السرعة على أساس كل إطار على حدة: @keyframes my-animation { 0% { ... animation-timing-function: linear; } 50% { ... animation-timing-function: ease-out; } } في هذه الحالة، سيكون النصف الأول من الحركة خطيًا، بينما يستخدم النصف الثاني دالة التوقيت ease-out. تمرين لقد أنشأت مثالًا توضيحيًّا على CodePen. الخاصيات مُدرجة في CSS. حاول تغيير بعض هذه الخاصيات لمعرفة ما سيحدث. المصادر ترجمة وبتصرف للفصل animation properties من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة التالية: تطبيق عملي: الإطارات المفتاحية المقالة السابقة: تطبيق عملي: التحريكات النسخة العربية الكاملة من كتاب: التحريك عبر CSS

ألقينا في المقالات الماضية نظرة على الخاصية transition، وسنلقي في هذه المقالة نظرة أعمق على الخاصية animation. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات الحركات؟ تجهيز بيئة العمل لإنشاء الحركات مدخل إلى الانتقالات: التنقل بين الحالات مدخل إلى الحركات: مفهوم الحركة تطبيق عملي: الانتقالات خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاسكربت تطبيق عملي: التحريكات خاصيات الحركات تطبيق عملي: الإطارات المفتاحية الحركات المتعددة المتزامنة موجز الحركات رواية القصص عبر الحركات حرب النجوم إظهار المحتوى أثناء التمرير سهولة الوصول نهاية الرحلة علاقة تكاملية تُطبّق الخاصية animation على العناصر بشكل مشابه للخاصية transition. كما أنها تحتاج إلى جزء ثانٍ، يسمى الإطارات المفتاحية (keyframes). .element { animation: ... } @keyframes animation-name { /* تُكتَب هنا النقاط المرجعية لهذا الإطار المفتاحي */ } تتمثل إحدى فوائد تعريف الإطارات المفتاحية keyframes بشكل منفصل في أنها تتيح لنا إنشاء تحريكات قابلة لإعادة الاستخدام. الخاصية animation تُطبّق الإطارات المفتاحية على العناصر باستخدام الخاصية animation. وهي تشبه transition إلى حد بعيد، ولكنّها تتميز عنها ببعض الخاصيات الإضافية. يمكن كتابة التحريكات بالشكل المختصر التالي: animation: change-background 4s linear infinite; في حال كتابتها كخاصيات منفردة، فستبدو الصياغة كما يلي: animation-name: change-background; animation-duration: 4s; animation-timing-function: linear; animation-repeat: infinite; القيم المعطاة لـ transition هي عبارة عن خاصيات (properties)، مثل background أو all، أما الخاصية animation فتُعطى اسم مجموعة الإطارات المفتاحية التي تؤلف تسلسل الحركة. تتميز التحريكات ببعض الخاصيات التي ليست لدى الانتقالات. على سبيل المثال، يمكننا برمجة التحريكات لكي تتراوح ذهابًا وإيابًا، بدلًا من تكرار الحركة من البداية كل مرة. الإطارات المفتاحية مجموعة الإطارات المفتاحية keyframes في CSS هي عبارة عن سلسلة من النقاط المرجعية على طول مسار التحريك. ويُكتب كل إطار مفتاحي كنسبة مئوية. أفضل طريقة لوصف هذا المفهوم هي باستخدام مثال توضيحي. لنبدأ بعنصر div على صفحة، والذي تتغير خلفيته بمرور الوقت. فهو يبدأ بخلفية زرقاء، ثم تتغير إلى خلفية برتقالية، ثم خلفية خضراء في النهاية. إذا حاولنا أن نوضح لشخص ما كيف يحدث هذا التغيير في ألوان الخلفية بمرور الوقت، فقد نصف الأمر هكذا: "البدء بخلفية زرقاء، ثم خلفية برتقالية في منتصف الطريق، ثم الانتهاء بخلفية خضراء" أو إذا أردنا أن نكون أكثر دقة، فيمكننا استخدام النسب المئوية لشرح توقيت التغييرات: "عند قطع 0٪ من الطريق (البداية)، فإنّ الخلفية ستكون زرقاء، ثم عند الوصول إلى نسبة 50٪ من الوقت، فستصير الخلفية برتقالية، وعند الوصول إلى نسبة 100٪، ستصير الخلفية خضراء" يمكننا تلخيص ذلك على النحو التالي: 0% Blue 50% Green 100% Orange من خلال تحديد هذه النسب المئوية، فقد أنشأنا سلسلة من "النقاط المرجعية" التي ينبغي أن تمر بها التحريكات. كل ما نحتاج إليه الآن هو إخبار المتصفح بأنّ هذه النسب هي في الواقع إطارات مفتاحية keyframes، مع إعطاء التحريك اسمًا. والنتيجة هي هذه: @keyframes change-background { 0% { background: blue; } 50% { background: orange; } 100% { background: green; } } لقد سمّينا عملية التحريك change-background. سنستخدمها لاحقًا عندما نريد تطبيق الإطارات المفتاحية على عنصر ما. بقراءة الشيفرة من أعلى إلى أسفل، تصف النسب المئوية موضع الإطارات الرئيسية في مسار التحريك. يمكننا أن نرى ذلك بشكل عملي في الصورة أسفله: المصدر http://codepen.io/donovanh/pen/WbqNwd?editors=110 أثناء حدوث الحركة، ينشئ المتصفح الإطارات المفتاحية الوسطية اللازمة للانتقال من كل لون من ألوان الخلفية إلى اللون التالي. بإخبار المتصفح أننا أردنا أن يبدأ العنصر div بلون معيّن، وأنّ عليه أن يأخذ لونًا آخر في منتصف الطريق، ثم ينتهي بلون ثالث، فإنّ المتصفح يتولى إنشاء التحريكات اللازمة بين كل نقطة من تلك النقاط. يمكنك مراجعة هذا المثال على CodePen. لقد ذكرت في وقت سابق إمكانية استخدام الخاصية animation-direction كخيار بديل لإنشاء التحريك. إليك كيف يبدو ذلك: في هذه الحالة، قمت بتغيير قيمة الخاصية animation-direction إلى alternate. يمكنك الاطلاع على ذلك في موقع CodePen. البادئات في الوقت الحالي، لا يزال من الضروري استخدام البادئة -webkit- في الخاصية animation. لن أضيفها إلى الأمثلة، ولكنها ضرورية لتعمل التحريكات في بعض المتصفحات، مثل Safari. في CodePen، يمكنك استخدام خيار "Autoprefixer" الموجود ضمن إعدادات CSS. بالنسبة للتطوير المحلي، فأنا أستخدم أداة Autoprefixer الخاصة بأداة Gulp. (يشرح القسم «تحسين دعم المتصفحات لخاصيات CSS وشيفرة JavaScript» في المقال دليلك الشامل إلى أداة البناء Gulp كيفية أتمتة هذه العملية تلقائيًا.) أداة Prefix Free هي بديل جيد أيضًا. تمرين افتح مثال الإطارات المفتاحية هذا، وحاول تغيير الشيفرة. قم بالتجريب عليه، وحاول تعطيله، ثم إصلاحه. وإن ابتكرت تحريكات خاصة بك، فأخبرنا في التعليقات. المصادر ترجمة وبتصرف للفصل animations in action من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة التالية: خاصيات الحركات المقالة السابقة: الانتقالات وجافاسكربت النسخة العربية الكاملة من كتاب: التحريك عبر CSS

استخدمنا في المقالات السابقة الخاصية 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. اقرأ أيضًا المقالة التالية: تطبيق عملي: التحريكات المقالة السابقة: الانتقالات المتعددة النسخة العربية الكاملة من كتاب: التحريك عبر 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. اقرأ أيضا المقالة التالية: الانتقالات وجافاسكربت المقالة السابقة: دوال التوقيت النسخة العربية الكاملة من كتاب: التحريك عبر 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. اقرأ أيضًا المقالة التالية: الانتقالات المتعددة المقالة السابقة: خاصيات الانتقالات النسخة العربية الكاملة من كتاب: التحريك عبر 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. اقرأ أيضًا المقالة التالية: دوال التوقيت المقال السابقة: تطبيق عملي: الانتقالات النسخة العربية الكاملة من كتاب: التحريك عبر CSS

الآن وبعد أن قدمنا الخاصيتين 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

سنلقي في هذه الفقرة نظرة على خاصية الانتقال transition. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات الحركات؟ تجهيز بيئة العمل لإنشاء الحركات مدخل إلى الانتقالات: التنقل بين الحالات مدخل إلى الحركات: مفهوم الحركة تطبيق عملي: الانتقالات خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاسكربت تطبيق عملي: التحريكات خاصيات الحركات تطبيق عملي: الإطارات المفتاحية الحركات المتعددة المتزامنة موجز الحركات رواية القصص عبر الحركات حرب النجوم إظهار المحتوى أثناء التمرير سهولة الوصول نهاية الرحلة كانت المتصفحات فيما مضى بسيطة للغاية. فقبل وقت غير بعيد، لم تكن قادرة حتى على عرض الصور، أو التعامل إلا مع حفنة من الخطوط. ثم جاءت CSS، ومنحتنا القدرة على التحكم في شكل ومظهر صفحات الويب. التحريك (Animation) في المتصفحات ليس جديدًا. فقد وفرت لنا بعض مكتبات JavaScript مثل Flash و Canvas وغيرها طرقًا للتحريك، ولكن صارت CSS، في الآونة الأخيرة، خيارًا إضافيًا. الانتقالات إحدى الطرق التي تتيحها CSS للتحكم في التحريك في المتصفح هي باستخدام الخاصية 'transition'. بلغة المتصفحات، فإنّ الانتقال (transition) يعني حركة من حالة إلى أخرى. عندما نطبق عملية الانتقال على عنصر ما، فإننا نخبر المتصفح بأننا نريده أن ينقل، أو يحسب تلقائيًا، التغيير بين الحالات. على سبيل المثال، يمكننا تغيير تنسيق عنصر ما عند تمرير مؤشر الفأرة عليه، قم بتطبيق عملية الانتقال، وسينقل المتصفح التنسيق الأولي للعنصر إلى التنسيق الجديد نقلًا سلسًا مما يوحي بتطبيق حركة وحيوية على العنصر. خصائص الانتقال عندما نستخدم الانتقال على عنصر ما، فهناك الكثير من الخصائص التي يمكن أن تتحكم في كيفية الانتقال. يمكننا أن نجعله بطيئًا أو سريعًا، أو نؤخره، بل ويمكننا أن نتحكم في وتيرة التغيير باستخدام دوال التوقيت (timing functions). سوف نتطرق إلى ما يعنيه هذا في المقالة التالية. مثال آخر على الانتقالات المركبة: سنناقش قريبًا كيفية استخدام الانتقالات للقيام بمثل هذه التحريكات. مختصر القول الانتقال هو تغيير من حالة إلى أخرى. على سبيل المثال، عند تمرير مؤشر الفأرة فوق عنصر ما، فقد يتغير تنسيقه. الانتقالات تجعل التغيير يبدو كحركة متصلة وسلسة. تمرين كيف تبدو بيئة العمل خاصتك؟ قم بإلقاء نظرة على الشيفرة، وابحث عن الخاصية 'transition' في شيفرة CSS. هل يمكنك تخمين ما تفعله؟ في المرة القادمة التي تتصفح فيها الويب، ابحث عن أمثلة للانتقالات. ابحث عن التغييرات المثيرة للاهتمام، مثل ما يحدث عندما يُضاف عنصر جديد إلى الصفحة، أو عند تمرير مؤشر الفأرة فوق زر ما. ستجد أنّ الويب مليء بالتحريكات بمجرد أن تبدأ في البحث عنها. سنلقي في المقالة التالية نظرة عامة على الخاصية 'animation'، وكيف تختلف عن الخاصية 'transition'. المصادر ترجمة وبتصرف للفصل transitions من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة التالية: مدخل إلى الحركات: مفهوم الحركة المقالة السابقة: تجهيز بيئة العمل لإنشاء الحركات النسخة العربية الكاملة من كتاب: التحريك عبر 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. اقرأ أيضًا المقالة التالية: تطبيق عملي: الانتقالات المقال السابقة: مدخل إلى الانتقالات: التنقل بين الحالات النسخة العربية الكاملة من كتاب: التحريك عبر CSS

هذه المقالة جزء من سلسلة من المقالات حول التحريك في 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. اقرأ أيضًا المقالة التالية: تجهيز بيئة العمل لإنشاء الحركات النسخة العربية الكاملة من كتاب: التحريك عبر CSS

لنستخدم CSS لرسم شخصية بيماكس (Baymax) من فيلم Big Hero 6. سنحرّك في هذا المنشور صورة خلفية، بالإضافة إلى تأثير حركة بتوقيت دقيق، ونقوم بإجراء عرض تجريبي CSS من عنصر HTML واحد. تجربة حية. عنصر واحد سنكون قادرين باستخدام العنصر الزائف على إنشاء أجزاء الوجه بعنصر HTML واحد. <div class="baymax"></div> التصميم لضبط المرحلة سنضيف تدرّجًا دقيقًا للشاشة لجعلها تبدو كرأس أبيض منحنٍ. سنستخدم لهذا تدرجًا شعاعيًا على عنصر body. body { background: radial-gradient(circle at center, #fff, #fff 50%, #aaa); background-size: 100% 100%; background-repeat: no-repeat; height: 100vh; } بعد ذلك نضع الوجه في مركز الصفحة. الفم خط أسود بسيط، وسنقوم بذلك باستخدام الخاصية border. .baymax { border-bottom: 1.5em solid #000; position: absolute; top: 50%; left: 50%; width: 50%; transform: translate(-50%, -40%); } تقوم الخاصية الأولى بتعيين إطار سفلي أسود بعرض 1.5em. ثمَّ يتموضع الخط باستخدام الموضع المطلق، فيندفع إلى الأسفل 50% ويتحرك من اليسار 50%. قيم الـ 50% هي بالنسبة إلى حجم العنصر الحاوي (body). المشكلة التي نواجهها الآن هي أنَّ العنصر يبدأ من منتصف طول وعرض الشاشة. إنَّه خارج المركز. لموازنة ذلك، نستخدم تحويلًا لسحب العنصر 50% يسارًا من عرضه، وإلى الأعلى 40% من عرضه. عند هذه المرحلة يصبح الفم في المركز على هذا النحو: إضافة العينين سنستخدم العناصر الزائفة before وafter لإضافة العينين إلى الوجه. لن يحتاج هذا إلى أي عنصر HTML إضافي وتتم معالجته بالكامل باستخدام CSS. .baymax::before { background: #000; border-radius: 50%; content: ""; position: absolute; width: 12em; height: 12em; left: -9em; top: -6em; transform: skewX(-4deg); } .baymax::after { background: #000; border-radius: 50%; content: ""; position: absolute; width: 12em; height: 12em; right: -9em; top: -6em; transform: skewX(4deg); } كل من هذه العناصر الزائفة لها خلفية سوداء، وحواف دائرية -border-radius: 50%; لجعلها دائرية. كلّ منها متموضع في نهاية الفم، وأخيرًا لها تحوّل skew لجعلها تبدو كأنَّها مائلة قليلًا للخلف. ستظهر النتيجة كما يلي: البطارية منخفضة هناك مشهدٌ مضحك في الفيلم حيث تنخفض بطارية بيماكس. فيترنَّح وتتدلَّى جفونه. يمكننا استخدام مزيج من الحركات والتدرّجات في الخلفية لإحداث التأثير. نريد أولًا أن نعطي الخلفية لونين. أسود لجزء العين المفتوح، وأبيض للجفن. يحتاج الجزء الأبيض أن يتموضع خارج العينين في البداية، ثمَّ سنحركه لجعل الجفون تتدلَّى. .baymax::before { background: linear-gradient(to bottom, #efefef, #efefef 50%, #000 50%, #000); background-position: 0 -100%; background-size: 200% 200%; ... } .baymax::after { background: linear-gradient(to bottom, #efefef, #efefef 50%, #000 50%, #000); background-position: 0 -100%; background-size: 200% 200%; ... } نحن الآن نضيف تدرّجًا خطيًّا في الخلفية، فنجعله ضعف ارتفاع الحاوية، ثم نحدد موضعه لذا يصبح النصف العلوي خارج الحاوية. مع وجود تدرّجات للخلفية في مكانين، يمكننا أن نضيف حركة keyframes للتحكم في حركة الجفون. @keyframes blink { 0%, 50% { background-position: 0 100%; } 85%, 95% { background-position: 0 75%; } 100% { background-position: 0 100%; } } قاعدة keyframes في الحركات هي طريقة لوصف سلسلة من الإطارات، باستخدام النسبة المئوية. تعود النسبة المئوية لمدى استمرار الحركة، لذا فإنَّ النسبة المئوية 50% منتصف الطريق عبر الحركة. بهذه الطريقة يمكننا ضبط الخلفية للبقاء مستيقظين حتى منتصف الحركة، ثمَّ بين الإطار 50% والإطار85%، تتحرك للأسفل، وثمَّ تستقر في نهاية الحركة. الخطوة التالية هي إخبار العناصر الزائفة أن تستخدم إطارات الحركة هذه. أضف خاصية animation للأنماط الحالية. .baymax::before { animation: blink 6s infinite; ... } .baymax::after { animation: blink 6s 0.1s infinite; ... } أخبرنا المتصفح هنا أن يستخدم حركة blink على كل عنصر. وضبطنا مدة الحركة إلى 6 ثواني وستستمر بشكلٍ لا نهائي. خاصية واحدة إضافية في المثال الثاني: تخبر المدة 0.1s بعد 6s المتصفح أن تتأخر الحركة لـ0.1 ثانية. يخلق هذا تأثير إغلاق العين الثانية بتأخيرٍ عن الأولى. وذلك يضيف التأثير المتدلي والمتعب ويجعلها تبدو أكثر واقعيةً. يجب أن تظهر النتيجة النهائية كما في الصورة: يمكنك مشاهدة تجربة حية. المتصفحات حذفت في أمثلة الشفرة أيّ بادئات معتادة webkit- وmoz-. لكن خاصيّات transform وanimation يجب أن تكون مسبوقة، وأنصحك باستخدام شيء ما مثل Autoprefixer لهذا. نسخة gif قابلة للمشاركة إليك نسخة gif متحركة يمكنك مشاركتها على الإنترنت بسهولة: ترجمة -وبتصرف- للمقال Baymax in CSS

لا يخفى على أي مطور ويب خصوصًا مطوري واجهة المستخدم الأمامية (front end developers) أهمية إضفاء بعض الحيوية في المواقع التي يصممونها عبر الحركات، إذ هنالك عدة فوائد يمكن تحصليها من إضافة الحركات إلى صفحات الموقع أهمها الابتعاد عن السكون الممل، ولفت الانتباه، وتحسين التواصل مع الزائر أو المستخدم ...إلخ. تحاول هذه المقالة تسليط الضوء على الحركات وأهميتها في مواقع الويب مع ذكر لمحة تاريخية عنها، وتوفر للقارئ مصادر علمية نظرية وعملية لتعلم كيفية إنشاء الحركات عبر CSS باحتراف. جدول المحتويات حرصًا على تنظيم المقالة ولتسهيل الوصول إلى القسم الذي تريده بسهولة، سنذكر هنا جدول المحتويات باختصار: ما هي أهمية الحركات؟ ظهور الحركات في الويب أريد تعلم إنشاء الحركات، فمن أين أبدأ؟ دروس نظرية: مبادئ الحركات والتحريك دروس تطبيقية عملية ما هي أهمية الحركات؟ لا شك أنَّك لاحظت من خلال تصفحك للمواقع كمية الحركات المُطبَّقة فيها بدءًا من الحركات الصغيرة في الأزرار والقوائم وحتى الصور المتحركة (GIFs) والفيديوهات التي تعمل تلقائيًا. وبمناسبة الإشارة إلى الصورة المتحركة، فقد انتشرت كثيرًا في الآونة الأخيرة وهذا طبيعي بالموازنة مع الصور الساكنة المملة. فيمكنك عبر صورة متحركة رواية قصة قصيرة أو إيصال فكرة للناظر بطريقة تتفوق فيها على عدة فقرات مكتوبة. بعبارة أخرى، معلومٌ أنَّ الإشارات والحركات أبلغ من الكلمات وتترك أثرًا أعمق في الذهن، فكيف لا وهي اللغة التي يمكن أن يتخاطب بها جميع البشر مهما كانت لغتهم وخلفيتهم! أي يمكنك عبر الحركات التواصل مع شريحة أوسع من المستخدمين. إذا نظرت حولك عمومًا أو أمعنت النظر في الطبيعية خصوصًا، ستجد أنَّ الحركة في كل مكان وهي سمة الطبيعية الأساسية، فكلمة «حيوية» هي مصدر صناعي من «حياة» ويراد بها الفاعلية والنشاط. وتركبية جسم الإنسان وعدد مفاصله تؤكد أهمية الحركة التي تمثِّل سمة أساسية فيه. فمثل التحريك كَمَثل أي فنٍّ سواءً كان الشعر أو الرسم أو غيرهما من الفنون، وأصبح في عصرنا هذا علمًا يُدرّس وعملًا يُنجَز. هل خطر في ذهنك الآن أفلام الرسوم المتحركة؟ تمامًا، فهذا ما قصدته. لابد أنَّك تعرف ديزني وشخصيتها المشهورة ميكي ماوس والمحقق كونان وشهرة سلاسل المانغا اليابانية (أي القصص المصورة) وتطورها إلى رسوم متحركة (أنمي)؛ فكل ذلك أساسه الحركة والتحريك وإبداع الإنسان في توظيف الحركة في شتى المجالات. ظهور الحركات في الويب إن كنت من جيل الثمانينات والتسعينات، فلابد أنَّك زرت الكثير من المواقع التي كانت تستعمل حركات شتى مثل بطاقات لامعة أو نجوم مشعة أو قطط راقصة أو غيرها من الأشكال والتي كنت أراها مزعجة لي في بعض الأحيان؛ فلا أحب الاستعمال الزائد للحركة كثيرًا وكنت أهرب من المنتديات التي تفرط في استعمالها. أغلب ذلك كان يجري عبر تقنية Flash (الفلاش) التي أحدث ثورة في الحركات والتحريك آنذاك (بعد الصور المتحركة GIF). على أي حال، كانت ذلك يُسبِّب بطئيًا كبيرًا في تحميل الموقع مما يؤثر سلبًا عليه. في هذه الأيام ومنذ فترة ليست ببعيدة، ظهرت تقنيات حديثة يمكن عبرها إضفاء الحيوية والحركة إلى مواقع الويب وذلك عبر HTML و CSS وجافاسكربت وصور SVG دون أن تؤثر على الأداء تأثيرًا ملحوظًا أو سلبيًّا. وبالتالي، دخلت الحركة إلى أغلب عناصر الصفحة بأدق تفاصيلها. فلم يعد الغرض منها إضفاء الحيوية والمتعة للمستخدم فقط، بل تحسين تجربة وواجهة المستخدم أيضًا (UX/UI) مما يجعل الموقع أفضل وأسهل للاستخدام خصوصًا إذا كان موقع الويب (أو تطبيق الويب) تفاعليًّا مع المستخدم. أريد تعلم إنشاء الحركات، فمن أين أبدأ؟ حسنًا، إن اقتنعت بضرورة وأهمية الحركات في صفحات الويب، فقد تتساءل: من أين أبدأ وهل يوجد مرجع يشرح لي التحريك شرحًا كافيًا ووافيًا؟ أجيبك، نعم يوجد وبالعربية أيضًا. وفرنا في أكاديمية حسوب سلسلة مقالات عن تعلم التحريك في CSS والتي تأخذك خطوة بخطوة لإنشاء حركات احترافية وإضافتها إلى موقعك. هذه السلسلة هي ترجمة لفصول كتاب CSS Animation 101. ستغطي هذه المقالات المواضيع التالية: أولًا: ما هي الحركات؟ سنحاول أن نفهم سبب استخدام الحركات. سنقدم أيضًا الخاصيتين transition و animation، إضافة إلى بعض مصادر الإلهام. ثم: سنتحدث بتفصِيل عن الخاصية transition. ونتعلم كيفية عمل الانتقالات، والخاصيات التي تُمكّننا من التحكم في الحركة. بعد ذلك: سنركز على الخاصية animation، ونتعلم كيفية إنشاء الإطارات المفتاحية التي تتيح لنا فعل أشياء تتجاوز إمكانيات الانتقالات البسيطة. أخيرًا: سنجمع كل ما تعلمناه في الفصول السابقة. سندرس بعض الأمثلة المتقدمة التي تستخدم كلا الخاصيتين، ونتعلم الرابط بين الحركات وسهولة الوصول (accessibility)، ونشارك بعض مصادر CSS المفيدة التي يمكنك تطبيقها في مشاريعك، وأدوات JavaScript التي يمكن استخدامها لإنشاء تأثيرات أكثر تقدمًا. بعد قراءتك هذه السلسلة، ستفهم مبادئ التحريك في CSS فهمًا جيدًا، بالإضافة إلى الأدوات اللازمة لإنشاء الحركات وإضافتها إلى مشاريعك. تجمع مقالات هذه السلسلة بين الأمثلة النظرية والعملية. سوف تتعلم كيفية إعداد بيئة العمل الخاصة بك، وستطالع الكثير من الأمثلة العملية عن الحركات في ثنيّات الطريق. دروس نظرية: مبادئ الحركات والتحريك سأكتب عناوين مقالات سلسلة التحريك في CSS مع شرح مبسط عن ما ستتعلمه فيها هنا لسهولة الوصول إليها: 1. ما هي استخدامات الحركات؟ هذه المقالة هي أول مقالة في السلسلة وتناقش سبب إضافة الحركات وتبنيها في مواقع الويب وكيف يمكن أن يستفيد منها مصممو مواقع الويب. 2. تجهيز بيئة العمل لإنشاء الحركات ستتعلم في هذه المقالة كيفية تجهيز بيئة العمل لديك لإنشاء الحركات عبر CSS وتشغليها إضافةً إلى تحديد سير العمل. سيكون العمل إمَّا باستعمال المتصفح نفسه (سيكون الاعتماد غالبًا على CodePen) أو بتجهيز بيئة تطوير محلية. سيتطرق المقال إلى أداة البناء Gulp لأتمتة بعض العلميات الروتينية. 3. مدخل إلى الإنتقالات: التنقل بين الحالات تشرح هذه المقالة كيف يجري تحريك عنصر عبر توضيح مبدأ تحويل إحدى خصائصه وصفاته ونقلها تدريجيًّا بزمن محدَّد لتوليد شعور بالحركة. ستلقي هذه المقالة أيضًا نظرة تفصيلية على خاصية التحويل transition في CSS وكيفية استعمالها في ذلك الغرض مع أمثلة عملية. 4. مدخل إلى الحركات: مفهوم الحركة يشرح هذا المقال أولًا الفرق بين الإنتقال والحركة ويوضح كيف يُنفِّذ المتصفح حركة ما على عنصر. يعرِّفك هنا على خاصية الحركة animation في CSS شقيقة خاصية التحويل transition وكيفية استعمالها لإنشاء الحركات. يعرض أيضًا مثالين عمليَّين ويحللهما لفهم كيف تجري الحركة. يشرح أخيرًا متى تُستخدَم الحركة ومتى يُستخدَم الانتقال. 5. تطبيق عملي: الانتقالات تتعمق هذه المقالة في استعمال الخاصية transition وتعرض مثالًا عمليًّا عن تطبيقها على زر لتغيير حالته أثناء تحويم مؤشر الفأرة فوقه. تناقش المقالة أيضًا موضوع دعم هذه الخاصية عبر مختلف المتصفحات. 6. خاصيات الانتقالات تشرح هذه المقالة جميع خاصيات الانتقالات المرتبطة بالخاصية transition مع عرض بعض الأمثلة. أي أنها ستعرض الصياغة المختزلة والصياغة التفصيلية المطوَّلة لها. ستتطرق أخيرًا إلى شرح موضوع مهم يتعلق بالأشياء التي لا يطبَّق الانتقال عليها. 7. دوال التوقيت تتحدث هذه المقالة عن دوال التوقيت (timing function) وكيفية استعمالها مع الانتقالات المطبقة على العناصر، وتشرح أشهر أنواع دوال التوقيت المستعملة حاليًّا مع عرض صور وأمثلة توضيحية تساعد على فهمها. 8. الانتقالات المتعددة سترى في هذه المقالة ما يحدث عند تطبيق عملية انتقال واحدة على عنصر تغير فيه عدة حالات، أي كيف يمكن توليد حركة جديدة عبر تطبيق عملية انتقال واحدة على عنصر واحد تحدث له عدة تغييرات. يجري تطبيق ذلك على مثاليين عمليين ملهمين. 9. الانتقالات وجافاسكربت تتحدث هذه المقالة عن طريقتين لتطبيق الانتقالات على العناصر عبر استخدام لغة جافاسكربت هما: إضافة وإزالة الأصناف (أي إضافة تنسيقات مكتوبة مسبقًا أو إزالتها)، أو التحكم مباشرةً في الانتقالات (أي تعديل شيفرة CSS مباشرةً). 10. تطبيق عملي: التحريكات ستلقي هذه المقالة نظرة أعمق على الخاصية animation شيقية الخاصية transition والمكملة لها في توليد الحركات مع ذكر عدة تطبيقات عملية عليها. سيجري أيضًا شرح الإطارات المفتاحية (keyframes) وارتباطها الوثيق بتلك الخاصية وكونها أساس الحركة. 11. خاصيات الحركات تشرح هذة المقالة الصياغة المختزلة والصياغة التفصيلية المطوَّلة للخاصية animation وتشرح بعدها الخاصيات المرتبطة بها ووظيفة كل منها. تتطرق أخيرًا إلى كيفية استخدام دوال التوقيت ضمن الإطارات المفتاحية. 12. تطبيق عملي: الإطارات المفتاحية تلقي هذه المقالة نظرة أعمق على الإطارات المفتاحية (keyframes) وصياغتها وكيفية استعمالها مع الحركات لتحريك العناصر تحريكًا مخصَّصًا. سيجري شرح كل ذلك شرحًا تفصيليًّا عبر تطبيق عملي لتحريك زر حركة مُخصَّصة. 13. الحركات المتعددة المتزامنة تتحدث هذه المقالة عن كيفية استخدام عدة مجموعات من الإطارات المفتاحية (keyframes) لإنشاء حركة معقدة مؤلفة من عدة حركات تعمل بشكل متزامن مع بعضها بعضًا. المثال العملي في هذا الدرس هو إنشاء إشارة مرور. 14. موجز الحركات نتوقف هنا في هذه المقالة للالتقاط الأنفاس وأخذ استراحة بسيطة يجري فيها مراجعة وتلخص كل ما تعلمته مسبقًا في المقالات السابقة عن الحركات والانتقالات وتطبيقها لتحريك العناصر في CSS. 15. رواية القصص عبر الحركات تطبِّق هذه المقالة كل ما تعلمته مسبقًا لإنشاء حركات هادفة مفيدة، إذ تشرح مفهوم الصورة الرئيسية المستعملة بكثرة في الصفحات الرئيسية للموقع وصفحات الهبوط والتي تحكي هدف الوقع أو تُعلِّم كيفية استخدامه. 16. حرب النجوم (Star War) سنطبق في هذه المقالة كل ما تعلمته في المقالات السابقة لصنع حركة متجِهيًّة (SVG) مرحة، وذلك بالعمل على تحريك عنوان فيلم حرب النجوم من إعلان "The Force Awakens" ليظهر وكأنه ثلاثي الأبعاد. في أثناء ذلك، سيجري شرح الخاصية transform ودوالها‏ scale()‎ و translateZ()‎ و rotateY()‎. 17. إظهار المحتوى أثناء التمرير سوف تتعلم في هذه المقالة كيفية إظهار العناصر عند تمرير (scrolling) إليها وعرضها على نافذة المتصح مع إضافة حركة إليها. يعرض لتحقيق ذلك إطاري عمل هما: Wow.js و Animate.css مع عدم نسيان الدعم الذي يوفره Modernizr احتياطًا من أولائك المستخدمين الذين لا يشغّلون JavaScript لسبب ما. 18. سهولة الوصول تنتقل هذه المقالة بعيدًا عن الحركات للتحدث عن سهولة الوصول (accessibility)، إذ لا تقل عملية تسهيل وصول جميع الأشخاص للمحتوى أهمية عن عملية إنشاء الحركات. تدور رحى هذه المقالة حول مناقشة العبارة التالية: ما الفائدة من الحركات إن منعت بعض الأشخاص (مثل الذين يستخدمون قارئات الشاشة مثلًا) من الوصول إلى المحتوى وعرضه، أو سببت إزعاجًا لآخرين وأعاقتهم عن استخدام موقعك أو تطبيقك بأريحية وكفاءة. 19. نهاية الرحلة تعرض هذه المقالة الأخيرة من سلسلة التحريك في CSS بعض المصادر والمراجع المفيدة في إنشاء حركات متقدمة وتحاول توجيهك إلى الخطوات اللاحقة لتطوير نفسك والانتقال إلى مراحل متقدمة في مجال التحريك. دروس تطبيقية عملية @media screen and (min-width: 650px) { .response_image { width: 33%; display: inline-block; vertical-align: top; margin-top: 0px; } .response_descrip { width: 64%; display: inline-block; margin-right: 10px; vertical-align: top; margin-top: 0px; } } تحوي الأكاديمية على مقالات عدة تتحدث عن الحركات في CSS بمستويات متفاوتة ومواضيع متنوعة تصب جميعها في موضوع واحد ألا وهو «التحريك في CSS»، لذا جمعت لك جميع هذه المقالات لسهولة الوصول إليها من مكان واحد ولتكون لك مرجعًا تستعين به في المستقبل. مبادئ التحريك في صفحات الويب باستخدام CSS تشرح هذه المقالة المبادئ الاثنا عشر لأساسيات التحريك عبر CSS - المنشورة بكتاب عنوانه: "وهم الحياة: الرسوم المُتحركة في ديزني" - وتناقش كيف لها أنّ تُطبَّق في صناعة صفحات الويب مع أمثلة توضيحيّة وإتاحة الوصول إلى مصدر شيفرة HTML و CSS الخاصّة بهذه الأمثلة. تأثيرات حركية على عناصر قوائم HTML باستخدام CSS ستتناول هذه المقالة كيف يُمكن للحركات المُساعدة على تقديم مُحتوى جديد، وذلك عبر إظهار وإخفاء عناصر القوائم. تتطرق أيضًا إلى شرح كيفية استخدام JavaScript لإضافة عناصر جديدة إلى القائمة، إذ يجري تطبيق حركة عليها أثناء إظهارها. تحريك شبه العناصر (pseudo-elements) في CSS ستتعرف في هذه المقالة على كيفية استخدام عنصر زائف (pseudo-element) لإضافة تأثير بصري على زر في CSS. يشرح أولًا ماهية شبه العناصر (أو العناصر الزائفة) وفائدتها وكيفية الاستفادة منها في إنشاء الحركات، ثم ينتقل إلى كيفية توظيفها في إنشاء زر برَّاق عبر الحركات. تحريك زر تفضيل التغريدة الخاص بتويتر باستخدام CSS فقط يعرض هذه المقالة طريقة لمحاكاة حركة زر "التفضيل" في تويتر الذي حدثه مؤخرًّا المعتمدة على سلسلة من الصور ولكن ستجري عملية محاكاة الحركة وتقليدها باستعمال CSS مع دوال التوقيت بالإضافة إلى شرح مفهوم وهم الحركة. تنبيهات مؤقتة باستخدام CSS ستتعلم في هذه المقالة البسيطة كيفية عمل تنبيهات مؤقتة بحركة جميلة باستخدام CSS فقط حتى تخطر المستخدم بوجود شيء جديد. ما سيجري تطبيقه هو إظهار تنبيه بسيط أو عبارة ما أسفل الشاشة لمدة معينة، ثم إخفاؤها. وسنضيف شريط تقدم (progress bar) لنعرف كم تبقى من الوقت حتى يختفي التنبيه. كيفية إنشاء قائمة متحركة من نوع off-canvas في CSS يشرح هذا المقال كيفية إنشاء قائمة تنقل من النوع الذي يكون خارج الشاشة (off-canvas)، إذ ستتعلم ببناء شيء شبيه بهذه المعاينة (انظر إلى Demo2) بحيث تكون الأيقونة التي تفتح القائمة موجودة في أعلى يسار الشاشة والحد (border) يكون اسمك من جهة اليسار. تأثير الانتقال في مشهد فضائي يشرح هذا الدرس طريقة إنشاء تأثير الانتقال في مشهد فضائي يضم الأرض والقمر ، إذ يهتم المقال بتعليمك كيفية استخدام الانتقالات لدب الحياة في محتوى الصفحة، بالإضافة إلى إنشاء تأثيرات مرور الفأرة فوق العناصر لتبدو بأجمل مظهر. أضف إلى ذلك أنها تناقش مفهوم الانتقالات والحركات والفرق بينهما وأيهما يجب أن تستخدمه. كيف تنشئ ساعة ذات عقارب باستخدام تحريكات CSS و JavaScript يشرح هذا الدرس طريقة إنشاء ساعة متحركة باستخدام تأثيرات CSS و JavaScript. أساس إنشاء هذه الساعة سيكون باستخدام HTML و CSS وخلفية SVG إضافةً إلى بعض أسطر JavaScript. ستستعمل أيضًا التحريكات Animations والانتقالات Transitions في CSS، وسنعتمد على JavaScript لضبط التوقيت الابتدائي. تحريك وانتقال العناصر في CSS3 (الانتقال) يشرح هذا المقال كيفية تطبيق الانتقالات (الخاصية transition) على العناصر عبر في CSS فقط مع ذكر أهم خصائص العناصر القابلة للانتقال مع أمثلة عملية. يتطرق أيضًا إلى زمن وسرعة الانتقالات، والتأخير في الانتقالات، وكيفية تطبيق الانتقال بتعليمة واحدة مختزلة. تحريك وانتقال العناصر في CSS3 (التحريك) يكمل هذا المقال شرح مفهوم تحريك العناصر وتطبيق التأثيرات البصرية عبر الحركات (الخاصية animation) في CSS ويوضح كيفية تحريك العنصر بين عدة حالات مع أمثلة عملية. المواضيع التي يتحدث المقال عنها أيضًا هي الإطارات المفتاحية، ومدة الحركة ودوال التوقيت، وتأخير تشغيل الحركة، واتجاه الحركة وحالتها، وتخصيص الحركات، وكيفية تطبيق حركة بتعليمة واحدة مختزلة. تأثير الانتقال والحركة في CSS يُعرِّفك هذا المقال على تأثيرات الانتقالات (Transitions) والحركات (Animations) في CSS3 بالإضافة إلى الحديث عن دعم المتصفحات لها، والخصائص التي تسمح بتطبيق تأثيرات الانتقال عليها، ومدة وتوقيت تأثير الانتقال، والإطارات المفتاحية في الحركات، ودوال التوقيت، وأزمنة الحركات، وتكرار واتجاه وحالة الحركة، وغيرها. أفضل 25 مكتبة تحريك في CSS يعرض لك هذا المقال أفضل مكاتب التحريك في ‏CSS، والتي تساعدك في حفظ وقتك عند تصميم ‏موقع الويب الخاص بك من خلال استخدامك لهذه المكاتب التي تضفي بعض الديناميكية والتفاعل إلى ‏عملك، إذ تحوي هذه المكتبات على العديد من الحركات والمؤثرات لأي نوع من أنواع عناصر صفحات الويب كالنصوص، الصور، الإطارات، الأزرار، والبطاقات والعديد غيرها. تأثيرات إبداعية لإضافة وإزالة عناصر قائمة باستخدام تحريكات CSS يشرح هذا المقال استخدام الحركات (animations) والانتقالات (transitions) في CSS3 لإعطاء تأثيرات عند إضافة أو إزالة عناصر من قائمة بالإستعانة بتقنية التخزين المحلي للمتصفح، إذ من الضروري أن يكون للانتقالات والحركات هدف واضح ومحدّد، ألا وهو تحسين تجربة المستخدم. كيفية إنشاء قائمة تنقل دائرية باستخدام CSS Transforms يعلمك هذا المقال كيفية إنشاء قائمة تنقل (navigation) دائرية الشكل باستخدام الانتقالات في CSS. يراعي المقال شرح ذلك خطوة بخطوة بالإضافة إلى الحسابات والمنطق البسيط وراء هذه الطريقة حتى يتسنى لك فهم كيفية عمل هذه القائمة المميزة. استخدام المحدد target: ضمن CSS لإنشاء تأثيرات واجهة المستخدم UI بدون JavaScript يشرح هذا المقال كيفية استخدام المحدد target: ضمن CSS لتحديد وتنسيق مظهر العنصر أو الفقرة الموجودة ضمن نفس الصفحة والمعرفة عبر الخاصية href ضمن رابط ما، إذ يتم تطبيق هذه التنسيقات على العنصر الهدف عند النقر على ذلك الرابط بدون اللجوء لاستخدام JavaScript. يشرح المقال أيضًا كيفية استعمال الخاصية animation لتطبيق تنسيق ما بشكل متدرج.

أساسيات التعريف والاستخدام @-webkit-keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } #box { -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ } تنبيه: لتجنب الإطالة، لن نستخدم في بقية الشيفرات البرمجية في هذه الصفحة أي بادئات، ولكن تذكَّر استخدامها في الشيفرات النهائية. الخطوات المتعددة @keyframes fontbulger { 0% { font-size: 10px; } 30% { font-size: 15px; } 100% { font-size: 12px; } } #box { animation: fontbulger 2s infinite; } إن كان للحركة خاصيتي البداية والنهاية نفسهما، فيمكنك صياغة ذلك بوضع فاصلة بين القيمتين 0% و ‏100%‏: @keyframes fontbulger { 0%, 100% { font-size: 10px; } 50% { font-size: 12px; } } أو يمكنك جعل الحركة تحدث مرتين (أو أيّ عدد زوجي من المرات)، وإعطاء الخاصية animation-direction القيمة alternate. استدعاء إطارات الحركة المفتاحية عبر خاصيات منفصلة .box { animation-name: bounce; animation-duration: 4s; /* Xms :أو */ animation-iteration-count: 10; animation-direction: alternate; /* normal :أو */ animation-timing-function: ease-out; /* ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) :أو */ animation-fill-mode: forwards; /* backwards, both, none :أو */ animation-delay: 2s; /* Xms :أو */ } الصياغة المختصرة للحركات في الصياغة المختصرة، ضع فاصلة بين كل القيم. لا يهم ترتيب القيم إلا في حال استخدام كل من المدة (duration) والتأخير (delay)، إذ يجب أن يكونا بهذا الترتيب. في المثال أدناه: 1s = المدة، 2s = التأخير، 3 = التكرار. animation: test 1s 2s 3 alternate backwards الجمع بين الخاصيتين transform و animation @keyframes infinite-spinning { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } الحركات المتعددة يمكنك الفصل بين القيم بفواصل للتصريح بحركات متعددة على مُحدّد (selector) معيّن: .animate-this { animation: first-animation 2s infinite, another-animation 1s; } الدالة‏ Steps()‎ تتحكم الدالة Steps()‎ بعدد الإطارات المفتاحية (keyframes) التي ستُصَيَّر في الإطار الزمني للحركة. في المثال التالي: @keyframes move { from { top: 0; left: 0; } to { top: 100px; left: 100px; } } إذا استخدمت Steps(10)‎ في الخاصية animation، فلن تُعرَض إلا 10 إطارات مفتاحية في الوقت المخصص. الحساب متسق هنا. ففي كل ثانية، سيتحرك العنصر بمقدار 10 بكسل (10px) إلى اليسار، و 10 بكسل إلى أسفل، حتى تنقضي مدة الحركة، ثم يحدث الأمر نفسه مرة أخرى في الاتجاه المعاكس، وهكذا دواليك. يمكن أن يكون هذا مناسبًا للحركات التي تعتمد على تمرير الصور (spritesheet animation)، مثل هذا المثال. دعم المتصفحات جلبنا بيانات دعم المتصفحات المعروضة هنا من الموقع Caniuse، يمكنك أن تجد تفاصيل أكثر عليه. يشير الرقم الموجود إلى جوار اسم المتصفح إلى أنّ ذلك المتصفح يدعم الميزة منذ ذلك الإصدار وما فوق. المصادر ترجمة وبتصرف للمقالة Keyframe Animation Syntax لصاحبها Chris Coyier.