السلام عليكم، سنرى في هذا الدرس تقنية Animation في CSS.
تغير تقنية Animation مظهر عناصر HTML تدريجياً حسب سيناريو معين في مدة زمنية معينة، و لدى هذه التقنية خاصية Shorthand بإسم 'ANIMATION' و ثمان خواص Longhand و هم :
* ANIMATION-NAME
* ANIMATION-DURATION
* ANIMATION-TIMING-FUNCTION
* ANIMATION-DELAY
* ANIMATION-ITERATION-COUNT
* ANIMATION-DIRECTION
* ANIMATION-FILL-MODE
* ANIMATION-PLAY-STATE
لا تطبَّق التقنية إلا بتواجد كود CSS بإسم Keyframes، حيث يعتبر سيناريو التقنية.
Keyframes
تعتبر Keyframes سيناريو تقنية Animation، حيث تحدد مجموعة تغيرات تطرأ على عناصر HTML في مواقيت معينة أثناء المدة الزمنية لتأثير Animation، و ذلك عبر أكواد تقحم داخل كود CSS يُكتب في محدده الخاص كلمة 'KEYFRAMES' ثم فراع من نوع Space ثم كلمة بدون فراغات تمثل إسم السيناريو، أما الأكواد التي بين قوسيه، أو ما يطلق على الكود الواحد منها إسم 'Keyframe'، فهي عبارة عن أكواد بتنسيق CSS تحتوي على محددات خاصة تنقسم إلى نوعين :
- النوع الأول هو عبارة عن كلمتين مفتاحيتين ألا و هما 'FROM' و 'TO'، حيث أن 'FROM' تحدد بداية المدة الزمنية لسيناريو التقنية، و 'TO' تحدد نهايتها.
- النوع الثاني هو عبارة عن نسب مئوية تحدد مواقيت المدة الزمنية لسيناريو التقنية.
يجب العلم بأن المظهر في تقنية Animation يتغير تدريجياً حسب سيناريو التقنية، فكلمة 'KEYFRAMES' في حد ذاتها هي كلمة مركبة من كلمتين :
- كلمة 'KEY'، و تعني مفتاح، مثلما في المجال الموسيقي يوجد مفتاح Sol و Alfa.. و هي مفاتيح لتحديد علامات موسيقية أو طبقات صوتية أو شيء من هذا القبيل.
- كلمة 'FRAMES'، و الفريم في مجال Audiovisual، و تحديداً في تقنية الفيديو هو عبارة عن صورة، بمعنى أن الفيديو هو عبارة عن مجموعة صور تظهر الواحدة تلو الأخرى بسرعة معينة في مدة زمنية محددة، أي عدد الفريمات في الثانية، و يعبَّر عنها بوحدة القياس 'FPS' يعني Frames Per Seconde.
و الغرض من هذا التوضيح هو أن Keyframe واحد في كود Keyframes يمثل بداية أو نهاية تغيير مظهر، و بين Keyframe و Keyframe موالي له يتم تغيير المظهر تدريجياً، أي بانسيابية.
الخاصية ANIMATION-NAME
مفهوم الخاصية ANIMATION-NAME
تعتبر الخاصية 'ANIMATION-NAME' خاصية إجبارية في تقنية Animation، حيث أنها هي الخاصية المسؤولة عن منع تطبيق التقنية أو التصريح بها عبر تحديد إسم السيناريو المراد تطبيقه في العناصر التي تتواجد في كودها CSS هذه الخاصية.
قيم الخاصية ANIMATION-NAME
لذى الخاصية 'ANIMATION-NAME' قيمة خاصة بإسم 'NONE'، و تقبل قيم رقمية و قيمتين من القيم الشاملة.
القيمة NONE
هي القيمة التلقائية للخاصية 'ANIMATION-NAME'، و تمنع تطبيق تقنية Animation.
القيمة الإسمية
هي عبارة عن إسم سيناريو التقنية المقحم في كود Keyframes، حيث يحدَّد السيناريو المراد تطبيقه عبر هذه القيمة.
القيم الشاملة
• 'INHERIT' : تورث للعنصر إسم السيناريو من العناصر المحتوية له.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية ANIMATION-DURATION
مفهوم الخاصية ANIMATION-DURATION
تعتبر الخاصية 'ANIMATION-DURATION' خاصية إجبارية أيضاً في تقنية Animation، حيث هي الخاصية المسؤولة عن المدة الزمنية التي تستغرقها التقنية في العناصر التي تحتوي على تقنية Animation، و سبب تصنيفها خاصية إجبارية في تقنية Animation هي قيمتها التلقائية التي تساوي 0s، حيث بانعدام الخاصية في كود CSS الذي يحتوي على التقنية، ستطبق قيمتها التلقائية، و بالتالي ستنعدم المدة الزمنية للتقنية حيث يتعذر حينها معاينتها رغم وجودها.
قيم الخاصية ANIMATION-DURATION
لذى الخاصية 'ANIMATION-DURATION' قيم رقمية، و تقبل قيمتين من القيم الشاملة.
القيم الرقمية
تقبل القيم بـ 'S' أي الثانية، و بـ 'MS' حيث أن 1s = 1000ms.
القيم الشاملة
• 'INHERIT' : تورث للعنصر المدة الزمنية من العناصر المحتوية له.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية ANIMATION-TIMING-FUNCTION
مفهوم الخاصية ANIMATION-TIMING-FUNCTION
تشْبه الخاصية 'ANIMATION-TIMING-FUNCTION' الخاصية 'TRANSITION-TIMING-FUNCTION' التي رأيناها في درس تقنية Transition في CSS، حيث أنها هي الخاصية المسؤولة عن التحكم في السرعة الحركية للإنسيابية، بمعنى تجعل إنسيابية تغيير المظهر تتم بسرعات مختلفة كسرعات متباطئة أو سرعات متسارعة أو سرعات ثابتة.
قيم الخاصية ANIMATION-TIMING-FUNCTION
القيم الخاصة
لذى الخاصية 'ANIMATION-TIMING-FUNCTION' نفس القيم الخاصة للخاصية 'TRANSITION-TIMING-FUNCTION'، و لقد تم شرح هذه القيم بالتفصيل في درس تقنية Transition و هم ثمانية :
- EASE
- LINEAR
- EASE-IN
- EASE-OUT
- EASE-IN-OUT
- STEP-START
- STEP-END
- CUBIC-BEZIER
و لذى القيم الخاصة للخاصيتين نفس التأثير، إلا أن هناك اختلاف بسيط يكمن في تطبيق التأثير، ففي الخاصية 'TRANSITION-TIMING-FUNCTION' يطبَّق التأثير أثناء المدة الزمنية الإجمالية لتقنية Transition، أما في الخاصية 'ANIMATION-TIMING-FUNCTION' فيطبق التأثير بين كل Keyframe و Keyframe موالي له في سيناريو تقنية Animation. ( درس تقنية Transition يشرح كيفية إنشاء سرعات حركية عبر آداة موقع Cubic Bezier، و الفيديو التوضيحي لهذا الدرس يظهر كيفية إنشاء سرعات حركية عبر آداة Inspect Element الموجودة في جميع متصفحات الإنترنت الكبرى )
القيم الشاملة
تقبل الخاصية 'ANIMATION-TIMING-FUNCTION' من القيم الشاملة قيمتين و هما :
• 'INHERIT' : تورث للعنصر السرعة الحركية من العناصر المحتوية له.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية، و التي هي القيمة 'EASE'.
الفيديو التوضيحي للدرس
الخاصية ANIMATION-DELAY
مفهوم الخاصية ANIMATION-DELAY
تعتبر الخاصية 'ANIMATION-DELAY' الخاصية المسؤولة عن المدة الزمنية قبل بدء سيناريو تقنية Animation.
قيم الخاصية ANIMATION-DELAY
تقبل الخاصية 'ANIMATION-DELAY' القيم بـ 'S' و بـ 'MS' منها الموجبة و السالبة حيث أن 1s = 1000ms، و قيمتين من القيم الشاملة.
القيمة الموجبة
بتواجد القيمة الموجبة في قيمة الخاصية 'ANIMATION-DELAY'، ستطبق كامل المدة الزمنية قبل بداية سيناريو تقنية Animation.
القيمة السالبة
بتواجد القيمة السالبة في قيمة الخاصية 'ANIMATION-DELAY'، ستخصم هذه المدة الزمنية من سيناريو تقنية Animation، و ستكون نقطة بدايته عند لحظة تواجده في حال كان مشغَّلاً مسبقاً بمدة إنتظار منعدمة.
القيم الشاملة
• 'INHERIT' : تورث للعنصر المدة الزمنية قبل بدء سيناريو تقنية Animation من العناصر المحتوية له.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية ANIMATION-ITERATION-COUNT
مفهوم الخاصية ANIMATION-ITERATION-COUNT
تعتبر الخاصية 'ANIMATION-ITERATION-COUNT' الخاصية المسؤولة عن عدد مرات تكرار سيناريو تقنية Animation في العنصر.
قيم الخاصية ANIMATION-ITERATION-COUNT
تقبل الخاصية 'ANIMATION-ITERATION-COUNT' القيم العددية و قيمة خاصة بإسم 'INFINITE'، و قيمتين من القيم الشاملة، أما قيمتها التلقائية فهي '1'.
القيمة العددية
يكتب في قيمة الخاصية 'ANIMATION-ITERATION-COUNT' عدد يحدد عدد مرات تكرار السيناريو في العنصر.
القيمة INFINITE
تعطي هذه القيمة تأثير التكرار اللانهائي للسيناريو في العنصر.
القيم الشاملة
• 'INHERIT' : تورث للعنصرتكرار سيناريو تقنية Animation من العناصر المحتوية له.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية ANIMATION-DIRECTION
مفهوم الخاصية ANIMATION-DIRECTION
تعتبر الخاصية 'ANIMATION-DIRECTION' الخاصية المسؤولة عن الإتجاه الذي يسلكه سيناريو تقنية Animation.
قيم الخاصية ANIMATION-DIRECTION
لذى الخاصية 'ANIMATION-DIRECTION' أربع قيم خاصة و هم 'ALTERNATE'، 'REVERSE'، 'NORMAL' و 'ALTERNATE-REVERSE'، و تقبل من القيم الشاملة قيمتين.
القيمة NORMAL
هي القيمة التلقائية للخاصية، و تجعل التقنية تطبَّق بشكل عادي، أي أن السيناريو يأخذ الإتجاه العادي الذي هو من بداية السيناريو إلى نهايته.
القيمة REVERSE
تجعل هذه القيمة التقنية تطبَّق بشكل عكسي، أي أن السيناريو يأخذ عكس الإتجاه العادي، و الذي هو من نهاية السيناريو إلى بدايته.
القيمة ALTERNATE
تجعل هذه القيمة التقنية تطبَّق بشكل متناوب، أي أن السيناريو يذهب في الإتجاه العادي تم يرجع في الإتجاه المعاكس، و يحبَّذ مرافقة هذه القيمة بقيمة 'INFINITE' للخاصية 'ANIMATION-ITERATION-COUNT'.
القيمة ALTERNATE-REVERSE
تجعل هذه القيمة التقنية تطبَّق بشكل متناوب لكن عكسي، أي أن السيناريو يبدأ بالإتجاه المعاكس، تم يذهب في الإتجاه العادي، و يحبَّذ مرافقة هذه القيمة أيضاً بقيمة 'INFINITE' للخاصية 'ANIMATION-ITERATION-COUNT'.
القيم الشاملة
• 'INHERIT' : تورث للعنصر اتجاه سيناريو تقنية Animation من العناصر المحتوية له.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية ANIMATION-FILL-MODE
مفهوم الخاصية ANIMATION-FILL-MODE
تعتبر الخاصية 'ANIMATION-FILL-MODE' الخاصية المسؤولة عن مظهر العنصر المتوفر على تقنية Animation قبل بدء سيناريو التقنية، أو بعد نهايته، أو قبل بدئه و بعد نهايته.
قيم الخاصية ANIMATION-FILL-MODE
لذى الخاصية 'ANIMATION-FILL-MODE' أربع قيم خاصة و هم 'BACKWARDS'، 'FORWARDS'، 'NONE' و 'BOTH'، و تقبل من القيم الشاملة قيمتين.
القيمة NONE
هي القيمة التلقائية للخاصية، و تمنع تطبيق أي مظهر قبل أو بعد سيناريو تقنية Animation.
القيمة FORWARDS
تعطي هذه القيمة تأثير تثبيت مظهر آخر Keyframe بعد انتهاء السيناريو، مع الأخذ بعين الإعتبار اتجاه السيناريو عبر الخاصية 'ANIMATION-DIRECTION'، فإذا كان الإتجاه عادي عبر القيمة 'NORMAL' أو 'ALTERNATE' سيطبَّق التأثير العادي لقيمة 'FORWARDS'، أما إذا كان الإتجاه معكوس عبر القيمة 'REVERSE' أو 'ALTERNATE-REVERSE' فستطبِّق القيمة 'FORWARDS' مظهر أول Keyframe، و أيضاً يجب الأخذ بعين الإعتبار تكرار السيناريو عبر الخاصية 'ANIMATION-ITERATION-COUNT' حيث في حالة التكرار المحدود للسيناريو ستطبِّق القيمة 'FORWARDS' تأثيرها بعد انتهاء التكرار، أما في حالة التكرار اللانهائي للسيناريو سيعطَّل تأثير القيمة 'FORWARDS'.
القيمة BACKWARDS
تعطي هذه القيمة تأثير تثبيت مظهر أول Keyframe أثناء مدة الإنتظار قبل بدء السيناريو، مع الأخذ بعين الإعتبار اتجاه السيناريو عبر الخاصية 'ANIMATION-DIRECTION'، فإذا كان الإتجاه عادي عبر القيمة 'NORMAL' أو 'ALTERNATE' سيطبَّق التأثير العادي لقيمة 'BACKWARDS'، أما إذا كان الإتجاه معكوس عبر القيمة 'REVERSE' أو 'ALTERNATE-REVERSE' فستطبِّق القيمة 'BACKWARDS' مظهر آخر Keyframe أثناء مدة الإنتظار.
القيمة BOTH
تعمل هذه القيمة نفس تأثير القيمة 'FORWARDS' و نفس تأثير القيمة 'BACKWARDS' معاً في نفس العنصر، أي أنها تطبِّق مظهر أول Keyframe في مدة الإنتظار قبل بدء السيناريو، و تثبِّت مظهر آخر Keyframe بعد انتهاء السيناريو، مع الأخذ بعين الإعتبار الإتجاه عبر الخاصية 'ANIMATION-DIRECTION' و التكرار عبر الخاصية 'ANIMATION-ITERATION-COUNT'.
القيم الشاملة
• 'INHERIT' : تورث للعنصر المظهر قبل أو بعد أو قبل و بعد سيناريو تقنية Animation من العناصر المحتوية له.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية ANIMATION-PLAY-STATE
مفهوم الخاصية ANIMATION-PLAY-STATE
تعتبر الخاصية 'ANIMATION-PLAY-STATE' الخاصية المسؤولة عن تشغيل أو إيقاف سيناريو تقنية Animation.
قيم الخاصية ANIMATION-PLAY-STATE
لذى الخاصية 'ANIMATION-PLAY-STATE' قيمتين خاصتين و هم 'RUNNING' و 'PAUSED'، و تقبل من القيم الشاملة قيمتين.
القيمة RUNNING
هي القيمة التلقائية للخاصية، و تسمح بتشغيل سيناريو التقنية.
القيمة PAUSED
توقف هذه القيمة سيناريو التقنية، و تظهِر مظهر أول Keyframe.
القيم الشاملة
• 'INHERIT' : تورث للعنصر حالة التشغيل أو الإيقاف من العناصر المحتوية له.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية Shorthand لتقنية Animation
تسمى الخاصية Shorthand لتقنية Animation بـ 'ANIMATION'، و يكتب في قيمتها قيمة الخاصية 'ANIMATION-NAME'، ثم فراغ من نوع Space، ثم قيمة الخاصية 'ANIMATION-DURATION'، ثم فراغ من نوع Space، ثم قيمة الخاصية 'ANIMATION-TIMING-FUNCTION'، ثم فراغ من نوع Space، ثم قيمة الخاصية 'ANIMATION-DELAY'، ثم فراغ من نوع Space، ثم قيمة الخاصية 'ANIMATION-ITERATION-COUNT'، ثم فراغ من نوع Space، ثم قيمة الخاصية 'ANIMATION-DIRECTION'، ثم فراغ من نوع Space، ثم قيمة الخاصية 'ANIMATION-FILL-MODE'، ثم فراغ من نوع Space، ثم قيمة الخاصية 'ANIMATION-PLAY-STATE'.
جميع قيم خواص Longhand لتقنية Animation مدعومة في قيمة الخاصية Shorthand لتقنية Animation باستثناء القيم الشاملة.
أما القيمة التلقائية للخاصية 'ANIMATION' فهي هذه 'NONE 0S EASE 0S 1 NORMAL NONE RUNNING' أي القيمة التلقائية لكل خاصية Longhand لتقنية Animation حسب تنسيق Shorthand.
تقبل أيضاً الخاصية 'ANIMATION' من القيم الشاملة قيمتين و هما 'INHERIT' و 'INITIAL'.
• 'INHERIT' : تورث للعنصر تأثير تقنية Animation من العناصر المحتوية له.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.
تطبَّق القيم التلقائية لخواص Longhand في حالة عدم تواجدها في الكود المتوفر على تقنية Animation، و تطبق أيضاً في حالة عدم تواجد القيم الخاصة بها في الخاصية Shorthand لتقنية Animation
الأكواد المستعملة في الدرس
أتمنى أن تستفيدوا من الدرس