الرسوم المتحركة CSS للصغار. أمثلة الرسوم المتحركة CSS وأنواع التعليمات البرمجية الجاهزة للرسوم المتحركة css

لقد رأينا ذلك مؤخرًا الانتقالاتهي مجرد وسيلة الرسوم المتحركةخصائص النمط من الأصليقبل الاخيرتنص على.

لذا فإن التحولات في CSS هي محددحسب نوع الرسوم المتحركة ، حيث:

هناك حالتان فقط: البداية والنهاية ؛
الرسوم المتحركة ليست حلقية ؛
يتم التحكم في الحالات الوسيطة فقط من خلال وظيفة الوقت.

لكن ماذا لو أردت:

السيطرة على متوسطتنص على؟
إلى الحلقةحيوية؟
إنشاء أنواع مختلفة من الرسوم المتحركة لـ واحدغرض؟
تحريك خاصية معينة فقط في نصفالطريقة؟
التقليد وظائف زمنية مختلفةلخصائص مختلفة؟

تسمح الرسوم المتحركة في CSS بكل هذا وأكثر.

الرسوم المتحركة تشبه فيلمًا صغيرًا ، حيث تقوم ، كمخرج ، بإعطاء تعليمات (قواعد النمط) للممثلين (عناصر HTML) لمشاهد مختلفة (الإطارات الرئيسية).

خصائص الرسوم المتحركة

مثل الانتقال ، فإن خاصية الرسوم المتحركة هي مختصرلعدد قليل من الآخرين:

اسم الرسوم المتحركة: اسم الرسوم المتحركة ؛
مدة الرسوم المتحركة: المدة التي تستغرقها الرسوم المتحركة ؛
وظيفة توقيت الرسوم المتحركة: كيف يتم حساب الحالات الوسيطة ؛
تأخير الرسوم المتحركة: تبدأ الرسوم المتحركة بعد فترة من الوقت ؛
عدد مرات تكرار الرسوم المتحركة: عدد مرات تنفيذ الرسوم المتحركة ؛
اتجاه الحركة: هل تسير الحركة في الاتجاه المعاكس أم لا ؛
وضع تعبئة الرسوم المتحركة: ما هي الأنماط التي يتم تطبيقها قبل بدء الرسوم المتحركة وبعد انتهائها.

مثال سريع

لتحريك زر التنزيل ، يمكنك كتابة رسم متحرك قفزة:

keyframes كذاب (0٪ (bottom: 0؛ box-shadow: 0 0 5px rgba (0،0،0،0.5)؛) 100٪ (bottom: 50px؛ box-shadow: 0 50px 50px rgba (0،0، 0،0.1) ؛)). زر التحميل (الرسوم المتحركة: الارتداد 0.5 ثانية مكعب بيزير (0.1،0.25،0.1،1) 0 ثانية غير متناوبة على حد سواء ؛)

تحتاج أولاً إلى كتابة رسم متحرك كذاب حقيقي باستخدامkeyframes وتسميته.

انا إستعملت مختصرخاصية الرسوم المتحركة وتضمنت جميع الخيارات الممكنة:

اسم الرسوم المتحركة: كذاب (يتطابق مع اسم الإطارات الرئيسية)
مدة الرسوم المتحركة: 0.5 ثانية (نصف ثانية)
وظيفة توقيت الرسوم المتحركة: مكعب بيزير (0.1،0.25،0.1،1)
تأخير الرسوم المتحركة: 0 ثانية (بدون تأخير)
عدد مرات تكرار الرسوم المتحركة: لانهائي (قابل للتكرار بلا حدود)
اتجاه الرسوم المتحركة: بديل (يذهب ذهابًا وإيابًا)
وضع تعبئة الرسوم المتحركة: كلاهما

تضمين التغريدة

قبل تحريك عناصر HTML ، أنت بحاجة إلى كتابة الرسوم المتحركة باستخدام keyframes... بشكل عام ، الإطارات الرئيسية متاحة للجميع خطوة وسيطةفي الرسوم المتحركة. يتم تحديدها باستخدام النسب المئوية:

0٪ - الخطوة الأولى من الرسوم المتحركة ؛
50٪ خطوة نصفية في الرسوم المتحركة ؛
100٪ هي الخطوة الأخيرة.

يمكنك أيضًا استخدام الكلمات الأساسية من وإلى بدلاً من 0٪ و 100٪ ، على التوالي.

يمكنك تحديد أي عدد تريده من الإطارات الرئيسية ، مثل 33٪ أو 4٪ أو حتى 29.86٪. من الناحية العملية ، سوف تكتب القليل منها فقط.

كل keyframe هو حكم CSS، هذا يعني أنه يمكنك كتابة خصائص CSS كالمعتاد.

لتعريف الرسوم المتحركة ، ما عليك سوى كتابة الكلمة الأساسيةkeyframes بامتدادها لقب:

keyframes حول (0٪ (يسار: 0 ؛ أعلى: 0 ؛) 25٪ (يسار: 240 بكسل ؛ أعلى: 0 ؛) 50٪ (يسار: 240 بكسل ؛ أعلى: 140 بكسل ؛) 75٪ (يسار: 0 ؛ أعلى: 140 بكسل ؛) 100٪ (يسار: 0 ؛ أعلى: 0 ؛)) ف (رسوم متحركة: حوالي 4 ثوانٍ لانهائي خطي ؛)

لاحظ أن البداية 0٪ والنهاية 100٪ تحتوي على نفس القواعد CSS. سيضمن هذا أن الرسوم المتحركة تدور بشكل مثالي. نظرًا لأن عداد التكرار مضبوط على لانهائي ، ستنتقل الرسوم المتحركة من 0٪ إلى 100٪ ، ثم على الفور الى الخلفإلى 0٪ وهكذا إلى الأبد.

اسم الرسوم المتحركة

اسمالرسوم المتحركة مستخدمة على الأقل مرتين:

في جاري الكتابةالرسوم المتحركة مع keframes ؛
في استخدامالرسوم المتحركة باستخدام خاصية اسم الحركة (أو خاصية الرسوم المتحركة المختصرة).

keyframes أيا كان (/ * ... * /) .Selector (اسم الحركة: أيا كان ؛)

مثل أسماء فئات CSS ، يمكن أن تتضمن أسماء الرسوم المتحركة فقط:

أحرف (من الألف إلى الياء) ؛
الأرقام (0-9) ؛
شرطة سفلية (_) ؛
واصلة (-).

لا يمكن أن يبدأ الاسم برقم أو بشرطتين.

مدة الرسوم المتحركة

مثل مدة الانتقال ، يمكن ضبط مدة الرسوم المتحركة على ثواني(1s) أو مللي ثانية(200 ملي ثانية).

المحدد (مدة الرسوم المتحركة: 0.5 ثانية ؛)

القيمة الافتراضية هي 0 ثانية ، مما يعني عدم وجود رسوم متحركة على الإطلاق.

الرسوم المتحركة توقيت وظيفة

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

المحدد (وظيفة توقيت الرسوم المتحركة: سهولة الدخول والخروج ؛)

الافتراضي هو السهولة.

نظرًا لأن الرسوم المتحركة لـ CSS تستخدم الإطارات الرئيسية ، يمكنك تعيين خطيوظيفة الوقت و محاكاةمنحنى Bezier محددًا عن طريق التحديد كثير محددة جداالأطر الرئيسية. ألق نظرة على Bounce.js للحصول على أحدث الرسوم المتحركة.

تأخير الرسوم المتحركة

كما هو الحال مع تأخير الانتقال ، يمكن ضبط تأخير الرسوم المتحركة على ثواني(1s) أو مللي ثانية(200 ملي ثانية).

القيمة الافتراضية هي 0 ثانية ، مما يعني أنه لا يوجد تأخير.

يكون مفيدًا عندما يتم تضمين رسوم متحركة متعددة في سلسلة.

A ، .b ، .c (الرسوم المتحركة: ارتداد 1 ثانية ؛). ب (تأخر الرسوم المتحركة: 0.25 ثانية ؛). ج (تأخير الرسوم المتحركة: 0.5 ثانية ؛)

الرسوم المتحركة-التكرار-العد

افتراضيًا ، يتم تشغيل الرسوم المتحركة فقط بمجرد(القيمة 1). يمكنك تعيين ثلاثة أنواع من القيم:

الأعداد الصحيحة ، مثل 2 أو 3 ؛
الأرقام الكسرية مثل 0.5 ، والتي ستلعب نصف الرسوم المتحركة فقط ؛
الكلمة الأساسية اللانهائية ، والتي ستكرر الحركة إلى أجل غير مسمى.

.selector (عدد التكرار للرسوم المتحركة: لانهائي ؛)

اتجاه الرسوم المتحركة

تحدد خاصية اتجاه الحركة بأي ترتيبتتم قراءة الإطارات الرئيسية.

عادي: يبدأ عند 0٪ ، وينتهي عند 100٪ ، ويبدأ عند 0٪ مرة أخرى.
عكس: يبدأ عند 100٪ ، وينتهي عند 0٪ ، ويبدأ عند 100٪ مرة أخرى.
بديل: يبدأ من 0٪ ، يذهب إلى 100٪ ، يعود إلى 0٪.
عكسي بديل: يبدأ من 100٪ ، يذهب إلى 0٪ ، يعود إلى 100٪.

من السهل تخيل هذا إذا تم تعيين عدد مرات تكرار الرسوم المتحركة على لانهائي.

وضع تعبئة الرسوم المتحركة

تحدد خاصية وضع تعبئة الرسوم المتحركة ما يحدث أمامبداية الرسوم المتحركة و بعد، بعدمااكتمالها.

في تحديد مفتاح شخصييمكنك التحديد قواعد CSSالتي سيتم تطبيقها في خطوات مختلفة من الرسوم المتحركة. الآن يمكن لقواعد CSS هذه تصطدممع أولئك الذين تطبق بالفعلللعناصر المتحركة.

يتيح لك وضع ملء الرسوم المتحركة إخبار المتصفح إذا أنماط الرسوم المتحركة أيضاينبغي أن تنطبق خارج الرسوم المتحركة.

دعنا نتخيل زر، الذي:

أحمرإفتراضي؛
يصبح أزرقفي بداية الرسوم المتحركة ؛
و في النهاية لون أخضرعند اكتمال الرسم المتحرك.

آخر تحديث: 06.11.2016

توفر الرسوم المتحركة فرصًا رائعة لتغيير نمط العنصر. عند الانتقال ، لدينا مجموعة من الخصائص ذات القيم الأولية التي يمتلكها العنصر قبل بدء الانتقال ، والقيم النهائية التي يتم تعيينها بعد اكتمال الانتقال. بينما خلال الرسوم المتحركة لا يمكننا الحصول على مجموعتين من القيم فقط - الأولية والنهائية ، ولكن أيضًا العديد من مجموعات القيم الوسيطة.

تعتمد الرسوم المتحركة على التغيير المتسلسل للإطارات الرئيسية (الإطارات الرئيسية). يحدد كل إطار رئيسي مجموعة واحدة من القيم للخصائص المتحركة. والتغيير المتتالي لهذه الإطارات الرئيسية سيمثل الرسوم المتحركة في الواقع.

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

بشكل عام ، يتخذ إعلان CSS3 keyframe الشكل التالي:

keyframes animation_name (من (/ * قيم خاصية CSS الأولية * /) إلى (/ * قيم خاصية CSS النهائية * /))

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

على سبيل المثال ، دعنا نحدد رسمًا متحركًا للون الخلفية لعنصر ما:

الرسوم المتحركة في CSS3

في هذه الحالة ، تسمى الرسوم المتحركة backgroundColorAnimation. يمكن أن يكون للرسوم المتحركة اسم عشوائي.

توفر هذه الرسوم المتحركة انتقالًا من الخلفية الحمراء إلى الزرقاء. وبعد انتهاء الرسم المتحرك ، سيتم تعيين اللون المحدد لعنصر div.

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

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

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

keyframes backgroundColorAnimation (من (لون الخلفية: أحمر ؛) إلى (لون الخلفية: أزرق ؛)) div (العرض: 100 بكسل ؛ الارتفاع: 100 بكسل ؛ الهامش: 40 بكسل 30 بكسل ؛ الحد: 1 بكسل صلب # 333 ؛ لون الخلفية: # ccc ؛) div: hover (اسم الحركة: backgroundColorAnimation ؛ مدة الرسوم المتحركة: 2 ثانية ؛)

العديد من الأطر الرئيسية

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

keyframes backgroundColorAnimation (من (لون الخلفية: أحمر ؛) 25٪ (لون الخلفية: أصفر ؛) 50٪ (لون الخلفية: أخضر ؛) 75٪ (لون الخلفية: أزرق ؛) إلى (لون الخلفية: بنفسجي ؛))

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

يمكنك أيضًا تحريك عدة خصائص في إطار رئيسي واحد في وقت واحد:

keyframes backgroundColorAnimation (من (لون الخلفية: أحمر ؛ عتامة: 0.2 ؛) إلى (لون الخلفية: أزرق ؛ عتامة: 0.9 ؛))

يمكنك أيضًا تحديد عدة رسوم متحركة منفصلة ، ولكن يمكنك تطبيقها معًا:

keyframes backgroundColorAnimation (من (لون الخلفية: أحمر ؛) إلى (لون الخلفية: أزرق ؛))keyframes opacityAnimation (من (عتامة: 0.2 ؛) إلى (عتامة: 0.9 ؛)) div (العرض: 100 بكسل ؛ الارتفاع: 100 بكسل ؛ الهامش: 40 بكسل 30 بكسل ؛ الحد: 1 بكسل صلب # 333 ؛ لون الخلفية: #ccc ؛ اسم الرسوم المتحركة: backgroundColorAnimation ، opacityAnimation ؛ مدة الرسوم المتحركة: 2s ، 3s ؛)

يتم سرد الرسوم المتحركة كقيمة لخاصية اسم الحركة ، مفصولة بفواصل ، ويتم أيضًا تعيين وقت هذه الرسوم المتحركة مفصولاً بفاصلات في خاصية مدة الرسوم المتحركة. اسم الحركة ووقتها متطابقتان مع الموضع ، أي أن الرسوم المتحركة العتامة ستستمر 3 ثوانٍ.

الانتهاء من الرسوم المتحركة

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

على سبيل المثال ، تحدد خاصية animation-iteration-count عدد مرات تكرار الرسم المتحرك. على سبيل المثال ، تتكرر 3 رسوم متحركة في صف واحد:

عدد تكرار الرسوم المتحركة: 3 ؛

إذا كنت تريد تشغيل الرسوم المتحركة لعدد لا نهائي من المرات ، فسيتم تعيين القيمة اللانهائية لهذه الخاصية:

عدد التكرار للرسوم المتحركة: لانهائي ؛

عند التكرار ، ستبدأ الرسوم المتحركة من جديد من بداية الإطار الرئيسي. لكن مع اتجاه الرسوم المتحركة: بديل ؛ الاتجاه المعاكس للرسوم المتحركة عند تكرارها. أي أنه سيبدأ من نهاية الإطار الرئيسي ، وبعد ذلك سيكون هناك انتقال إلى إطار البداية:

اسم الرسوم المتحركة: backgroundColorAnimation ، opacityAnimation ؛ مدة الرسوم المتحركة: 2s، 2s؛ عدد التكرار للرسوم المتحركة: 3 ؛ اتجاه الرسوم المتحركة: بديل ؛

عندما تنتهي الرسوم المتحركة ، يقوم المستعرض بتعيين نمط العنصر المتحرك على النمط الذي كان سيحصل عليه قبل تطبيق الرسم المتحرك. لكن خاصية animation-fill-mode: forward تسمح لك بتعيين القيمة النهائية للخاصية animated بالضبط التي كانت في الإطار الأخير:

اسم الرسوم المتحركة: backgroundColorAnimation ؛ مدة الرسوم المتحركة: 2 ثانية ؛ عدد التكرار للرسوم المتحركة: 3 ؛ اتجاه الرسوم المتحركة: بديل ؛ وضع تعبئة الرسوم المتحركة: إلى الأمام ؛

تأخير الرسوم المتحركة

باستخدام خاصية Animation-delay (تأجيل الحركة) ، يمكنك تحديد وقت تأخير الرسوم المتحركة:

اسم الرسوم المتحركة: backgroundColorAnimation ؛ مدة الرسوم المتحركة: 5 ثوانٍ ؛ تأخير الرسوم المتحركة: 1 ثانية ؛ / * تأخير لمدة ثانية واحدة * /

وظيفة نعومة الرسوم المتحركة

كما هو الحال مع الانتقالات ، يمكنك تطبيق جميع وظائف التخفيف نفسها على الرسوم المتحركة:

خطي: دالة نعومة خطية ، تتغير الخاصية بالتساوي بمرور الوقت

السهولة: وظيفة سهلة تعمل على تسريع الرسوم المتحركة نحو المنتصف وتتباطأ نحو النهاية ، مما يوفر تغييرًا طبيعيًا أكثر

easy-in: سهولة الوظيفة التي تتسارع فقط في البداية

سهولة الخروج: وظيفة سهلة تتسارع فقط في البداية

easy-in-out: وظيفة سهلة تعمل على تسريع الرسوم المتحركة نحو المنتصف وتتباطأ نحو النهاية ، مما يوفر تغييرًا طبيعيًا أكثر

مكعب بيزير - استخدم وظيفة بيزير مكعب للرسوم المتحركة

تُستخدم خاصية Animation-time-function لتعيين وظيفة النعومة:

keyframes backgroundColorAnimation (من (لون الخلفية: أحمر ؛) إلى (لون الخلفية: أزرق ؛)) div (العرض: 100 بكسل ؛ الارتفاع: 100 بكسل ؛ الهامش: 40 بكسل 30 بكسل ؛ الحد: 1 بكسل صلب # 333 ؛ اسم الرسوم المتحركة: backgroundColorAnimation ؛ مدة الرسوم المتحركة: 3 ثوانٍ ؛ وظيفة توقيت الرسوم المتحركة: سهولة الدخول والخروج ؛)

خاصية الرسوم المتحركة

خاصية الرسوم المتحركة هي طريقة مختصرة لتحديد الخصائص المذكورة أعلاه:

الرسوم المتحركة: الرسوم المتحركة - اسم الرسوم المتحركة - مدة الرسوم المتحركة - التوقيت - الرسوم المتحركة للوظيفة - التكرار - عدد الرسوم المتحركة - حركة الاتجاه - تأخير الرسوم المتحركة - وضع التعبئة

المعلمتان الأوليان ، اللتان توفران عنوان وتوقيت الرسم المتحرك ، مطلوبان. باقي القيم اختيارية.

لنأخذ مجموعة الخصائص التالية:

اسم الرسوم المتحركة: backgroundColorAnimation ؛ مدة الرسوم المتحركة: 5 ثوانٍ ؛ وظيفة توقيت الرسوم المتحركة: سهولة في الخروج ؛ عدد التكرار للرسوم المتحركة: 3 ؛ اتجاه الرسوم المتحركة: بديل ؛ تأخير الرسوم المتحركة: 1 ثانية ؛ وضع تعبئة الرسوم المتحركة: إلى الأمام ؛

ستكون هذه المجموعة معادلة لتعريف الرسوم المتحركة التالي:

الرسوم المتحركة: backgroundColorAnimation 5s تسهل الدخول إلى الخارج 3 ثانية بديلة للأمام ؛

إنشاء لافتة مع الرسوم المتحركة

كمثال للرسوم المتحركة ، لنقم بإنشاء لافتة متحركة بسيطة:

لافتة HTML

هناك ثلاث رسوم متحركة تحدث في نفس الوقت. تعمل الرسوم المتحركة "banner" على تغيير لون خلفية الشعار ، بينما تُظهر الرسوم المتحركة للنص 1 والنص 2 النص وإخفائه باستخدام إعدادات الشفافية. عندما يكون النص الأول مرئيًا ، لا يكون النص الثاني مرئيًا والعكس صحيح. وهكذا ، نحصل على الرسوم المتحركة للنص في اللافتة.

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

1. الخصائص الأساسية للرسوم المتحركة CSS3

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

اسم الرسوم المتحركة- الاسم الفريد للرسوم المتحركة (الإطارات الرئيسية ، سنتحدث عنها أدناه).
مدة الرسوم المتحركة- مدة الرسوم المتحركة بالثواني.
الرسوم المتحركة توقيت وظيفة- منحنى سرعة الرسوم المتحركة. للوهلة الأولى ، إنه أمر غير مفهوم للغاية. من الأسهل دائمًا عرض مثال ، وسترى أدناه. يمكن أن يأخذ القيم التالية: خطي | سهولة | سهولة في | سهولة الخروج | بيزير مكعب (ن ، ن ، ن ، ن).
تأخير الرسوم المتحركة- تأخير بالثواني قبل بدء الرسوم المتحركة.
الرسوم المتحركة-التكرار-العد- عدد مرات تكرار الرسم المتحرك. يتم تعيينه إما ببساطة بواسطة رقم ، أو يمكنك تحديد لانهائي وسيتم تشغيل الرسوم المتحركة إلى أجل غير مسمى.

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

آخر شيء نحتاج إلى معرفته وفهمه من الناحية النظرية هو كيفية إنشاء الإطارات الرئيسية. من السهل أيضًا القيام بذلك ويتم ذلك باستخدام قاعدةkeyframes ، والتي يتم تحديد الإطارات الرئيسية بداخلها. بناء جملة هذه القاعدة كما يلي:

أعلاه ، وضعنا الإطار الأول والأخير. يتم حساب جميع الحالات الوسيطة تلقائيًا!

2. مثال حقيقي للرسوم المتحركة CSS3

النظرية مملة كالعادة وليست واضحة دائمًا. من الأسهل بكثير رؤية كل شيء بمثال حقيقي ، ومن الأفضل أن تفعل ذلك بنفسك في بعض صفحات اختبار HTML.

عند تعلم لغة برمجة ، عادة ما يكتبون برنامج "Hello، world!" لكننا لا ندرس لغة برمجة ، بل لغة لوصف مظهر المستند. لذلك ، سيكون لدينا "مرحبًا ، أيها العالم!"

إليك ما سنفعله كمثال:دعونا نحصل على نوع من الكتلة

سيكون عرضه 800 بكسل مبدئيًا وسيتقلص إلى 100 بكسل في 5 ثوانٍ.

يبدو أن كل شيء واضح - ما عليك سوى ضغط الكتلة

وهذا كل شيء! دعونا نرى كيف يبدو في الواقع.

أولا ترميز HTML. الأمر بسيط للغاية لأننا نعمل فقط مع عنصر واحد في كل صفحة.

1	<فئة div = "toSmallWidth">

وإليك ما يوجد في ورقة الأنماط:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.toSmallWidth (الهامش: 20px auto؛ / * 20 بكسل الحشو العلوي والسفلي والمحاذاة الوسطى * /الخلفية: أحمر ؛ / * خلفية حمراء للكتلة * /الارتفاع: 100 بكسل ؛ / * ارتفاع الكتلة 100 بكسل * /العرض: 800 بكسل ؛ / * العرض الأولي 800 بكسل * /-webkit-animé-name: animWidthSitehere ؛ مدة الرسوم المتحركة -webkit: 5s ؛ / * خاصية ببادئة لمتصفحات Chrome و Safari و Opera * /اسم الرسوم المتحركة: animWidthSitehere ؛ / * حدد اسم الإطارات الرئيسية (الموجودة أدناه) * /مدة الرسوم المتحركة: 5 ثوانٍ ؛ / * تعيين مدة الرسوم المتحركة * / } / * keyframes مع بادئة للمتصفحات Chrome و Safari و Opera * / @ -webkit-keyframes animWidthSitehere (من (العرض: 800 بكسل ؛) إلى (العرض: 100 بكسل ؛)) keyframes animWidthSitehere (من (العرض: 800 بكسل ؛) / * الإطار الرئيسي الأول حيث يكون عرض الكتلة 800 بكسل * /إلى (العرض: 100 بكسل ؛) / * الإطار الرئيسي الأخير حيث يكون عرض الكتلة 100 بكسل * / }

كما ترى ، لقد حددنا فقط أول وإطار رئيسي آخر ، وتم "بناء" جميع الإطارات الوسيطة تلقائيًا.

الرسوم المتحركة الأولى الخاصة بك CSS3 جاهزة. لدمج المعرفة المكتسبة ، قم بإنشاء مستند HTML وملف CSS ، وأدخل هناك (أو اكتب يدويًا بشكل أفضل) الرمز من المثال. عندها ستفهم بالتأكيد كل شيء. ثم حاول أن تفعل الشيء نفسه مع ارتفاع الكتلة (يجب أن ينخفض في الارتفاع) لتأمين المادة.

3. أمثلة الرسوم المتحركة CSS3 أكثر تعقيدًا

أعلاه ، لقد تعلمت مدى سهولة إنشاء الرسوم المتحركة CSS3. إذا حاولت القيام بذلك بيديك ، فقد فهمت بالفعل العملية برمتها وتريد الآن أن تعرف كيف يمكنك إنشاء رسوم متحركة أكثر تعقيدًا وجمالًا. ومن الممكن حقًا إنشائه. يوجد أدناه 3 دروس حيث يتم إنشاء الرسوم المتحركة بنفس الطريقة كما في المثال أعلاه.

أدت ممارسة تطوير موارد الويب إلى اتجاهين مهمين: إدراك السرعة والجودة. الأول يلزم المطور بأداء وظيفته بسرعة ، والثاني - يحدد حدود الوسيلة.

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

تركيب الرسوم المتحركة ودلالاتها

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

يصف هذا المثال عنصرين. الأول هو شريط مؤشر يتحرك إلى اليمين ويزداد حجمه بشكل متناسب. العنصر الثاني هو صورة تتحرك ببساطة إلى اليمين.

لا يتم عرض جميع الإطارات هنا. يتم تنفيذ الخاصية بسلاسة في هذه الحالة. يلاحظ زائر الصفحة حركة سلسة مع زيادة حجم الخط وحركة الصورة. باستخدام خيارات الحركة المختلفة بدلاً من النوع المريح ، يمكن التحكم في الحركة. يوفر خيار سهولة الدخول والخروج التسارع في البداية والتباطؤ في النهاية ، ولكن يمكنك اختيار خيار حركة آخر.

تراكب العناصر وتفاعلها

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

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

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

يؤدي تغيير وقت الرسوم المتحركة أيضًا إلى حلول غير قياسية. يؤدي استخدام خاصية التحويل ، مثل وظيفة تدوير العنصر ، إلى إنشاء التغييرات الأصلية. مثال:

هنا يغير الشريط مظهره باستمرار من حالة معتمة إلى حالة شفافة. في هذه الحالة ، فإن الصورة السفلية تغير شكلها فقط.

معلومات الرسوم المتحركة

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

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

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

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

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

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

الرسوم المتحركة للمستهلك

النجاحات الملحوظة في إنشاء موارد ويب عالية الجودة لا تزال تترك سؤالًا واحدًا مطروحًا بشكل غريب: لماذا يعتبر تصميم الموقع مصدر قلق للمطور؟

الموقع ليس عملاً فنياً وليس نتيجة عملية إبداعية لأغراض جمالية. الموقع ، في المقام الأول ، هو الوظيفة التي ، في رأي المالك (المطور) ، ستجلب زوارًا جددًا إليه وتوفر فرصة للعمل مع عملائهم.

بيع منتج ، وتقديم خدمة ، وأداء وظيفة معينة ... يأتي الزائر من أجل السلع والخدمات والأعمال. التصميم والرسوم المتحركة مهمان لكن رأي الزائر لا يزال أهم من رأي المالك (المطور).

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

أحد أشكال "الرسوم المتحركة الاستهلاكية" هو عندما يكون هناك ما اقترحه المطور ، وما يختاره المستهلكون السابقون ، وما يعتقده المستهلك الحالي.

مرحبا اصدقاء! سننظر اليوم في موضوع مثير للاهتمام - إنشاء رسوم متحركة CSS باستخدام مثال حقيقي. سيتوج هذا البرنامج التعليمي بإنشاء رسوم متحركة جميلة لشعار CSS بمليون دولار.

فصل

زابين

مواد الدرس

المصادر: تنزيل
مثال أساسي من البرنامج التعليمي: https://codepen.io/agragregra/pen/PKNavm
نموذج المبتدئين من البرنامج التعليمي: https://github.com/agragregra/optimizedhtml-start-template

قليلا من النظرية

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

إذا كانت لديك خبرة في إنشاء الرسوم المتحركة في أي تطبيق ، مثل Adobe After Effects أو برنامج Flash Professional القديم (الآن Adobe Animate) ، فيجب أن تكون على دراية بمفاهيم مثل Keyframes أو Timing Functions أو Motion Dynamics. »، أي ، مثل في أي منطقة أخرى للرسوم المتحركة ، قابلة للتطبيق على حركة العناصر على الصفحة باستخدام CSS. ومع ذلك ، على عكس العمل مع واجهات التطبيق ، يمكنك إنشاء الرسوم المتحركة CSS الخاصة بك عن طريق كتابة التعليمات البرمجية في المحرر.

CSS حكمkeyframes

يبدأ إنشاء الرسوم المتحركة CSS بإعلان اسم الحركة في كتلة تضمين التغريدةوتحديد ما يسمى بخطوات الرسوم المتحركة أو الإطارات الرئيسية.

لمراجعة النظرية والأساسيات ، سنستخدم CSS خالصًا ، وفي المستقبل ، بمثال أكثر تعقيدًا ، سنقوم بتوصيل استخدام معالج Sass المسبق. يمكنك معرفة المزيد عن Sass في البرنامج التعليمي. بالإضافة إلى ذلك ، من أجل فهم أعمق لأساسيات CSS ، أوصي أيضًا بقراءة الدروس "أساسيات CSS - دليل للأطفال الصغار" و "جميع محددات CSS في درس واحد"

دعنا نلقي نظرة على بنية keyframes @ والإطارات الرئيسية بمثال بسيط:

keyframes تدور (0٪ (نصف قطر الحدود: 0 0 0 0 ؛ التحويل: تدوير (0 درجة) ؛) 25٪ (نصف قطر الحدود: 50٪ 0 0 0 ؛ التحويل: تدوير (45 درجة) ؛) 50٪ (حد- نصف القطر: 50٪ 50٪ 0 0 ؛ التحويل: تدوير (90 درجة) ؛) 75٪ (نصف قطر الحد: 50٪ 50٪ 50٪ 0 ؛ التحويل: تدوير (135 درجة) ؛) 100٪ (نصف قطر الحد: 50٪ 50 ٪ 50٪ 50٪ ؛ تحويل: تدوير (180 درجة) ؛))

في السطر الأول ، نرى أنه بعد الكلمة الرئيسيةkeyframes يأتي اسمها "تحول". هذا هو اسم كتلة الإطارات الرئيسية ، والذي سنشير إليه أدناه.

بعد الإعلان ، يتم فتح قوس مجعد (في هذا المثال ، في CSS خالص) ، حيث تتم كتابة خصائص كل إطار رئيسي بالتتابع من 0٪ إلى 100٪. لاحظ أنه بين 0٪ و 100٪ ، يمكنك إدراج العديد من القيم الوسيطة كما تريد ، سواء كانت 50٪ أو 75٪ أو حتى 83٪. هذا مشابه جدًا للخط الزمني لتطبيق الرسوم المتحركة ، حيث يمكنك إضافة أي حالة وسيطة بين الحالتين.

علاوة على ذلك ، يمكن تطبيق كتلة التعليمات البرمجية هذه مع الإطارات الرئيسية على أي محدد CSS ، ولكن في أغلب الأحيان يتم إعدادها لمحدد معين إذا أردنا تحقيق سلوك معين من الكتلة المطلوبة.

في اشارة الى كتلة من keyframes

بعد أن قمنا بتعيين الإطارات الرئيسية للكائن (في الواقع يتم ذلك بالتوازي أو حتى بعد الوصول إلى كتلة بإطارات رئيسية) ، يمكننا أن ننتقل إلى الكتلة المصممة حديثًا. دعنا نلقي نظرة على الكود البسيط التالي من المثال أعلاه:

Div (العرض: 120 بكسل ؛ الارتفاع: 120 بكسل ؛ لون الخلفية: البنفسجي ؛ الهامش: 100 بكسل ؛ الرسوم المتحركة: تحول 2 ثانية سهل الخروج 1 ثانية بديل لانهائي ؛)

لا شيء يتوهم وصولا إلى السطر الأخير. نحدد هنا كيف سيبدو الكائن في البداية وفي السطر الأخير من الكتلة نشير إلى كتلة الإطارات الرئيسية مع الاسم "تحول":

الرسوم المتحركة: تحويل 2 ثانية إلى 1 ثانية بديلة غير محدودة ؛

إذا كان كل شيء واضحًا نسبيًا مع تعريف الإطارات الرئيسية ، فإن هذا السطر يحتاج إلى شرح فوري. كما نرى ، تأتي أولاً خاصية CSS "للرسوم المتحركة". هذا شكل مختصر للترميز ، مثل خاصية "margin: 20px 30px 40px 50px" ، والتي يمكن تقسيمها إلى عدة خصائص منفصلة:

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

اسم الرسوم المتحركة	اسم الرسم المتحرك المشار إليه منkeyframes
مدة الرسوم المتحركة	المدة أو المدة التي يستغرقها تنفيذ الرسوم المتحركة CSS. يمكن ضبطه بالثواني (ثوان) أو مللي ثانية (مللي ثانية)
الرسوم المتحركة توقيت وظيفة	وظيفة الوقت ، وديناميات حركة الكائن أو تغييرات الخصائص ( يسهل- (افتراضي) الرسوم المتحركة تبدأ ببطء ، وتتسارع وتنتهي ببطء ؛ خطي- الرسوم المتحركة تحدث بالتساوي ؛ سهولة في- يبدأ ببطء ويتسارع حتى آخر إطار رئيسي ؛ التخفيف من- يبدأ بسرعة ويتباطأ تدريجياً في النهاية ؛ سهولة في الخروج- يبدأ ببطء وينتهي ببطء)
تأخير الرسوم المتحركة	وقت تأخير الرسوم المتحركة قبل البدء. يتم تعيينها أيضًا في ثوانٍ أو مللي ثانية.
الرسوم المتحركة-التكرار-العد	عدد التكرارات (التكرارات) للرسوم المتحركة ( لانهائي- لانهائي ، أو يمكنك تعيين عدد أولي بدون وحدات)
اتجاه الرسوم المتحركة	اتجاه الرسوم المتحركة أو المتسلسلة أو العكسية أو ذهابًا وإيابًا ( عادي- (افتراضي) يتم تشغيل الرسوم المتحركة من البداية إلى النهاية وتتوقف ؛ البديل- يلعب من البداية إلى النهاية وفي الاتجاه المعاكس ؛ بديل عكس- يلعب من النهاية إلى البداية والعودة ؛ يعكس- يتم تشغيل الرسوم المتحركة من النهاية.)
حالة تشغيل الرسوم المتحركة	التحكم في تشغيل الرسوم المتحركة ( متوقف مؤقتا(وقفة)، ادارة(إطلاق) ، وما إلى ذلك). يمكن تطبيقها على: التمرير أو من دالة JS إذا لزم الأمر
وضع تعبئة الرسوم المتحركة	حالة العنصر قبل تشغيل الرسوم المتحركة وبعدها. على سبيل المثال ، القيمة إلى الوراءيسمح لك بإعادة جميع الخصائص إلى حالتها الأصلية فورًا بعد تطبيق الرسم المتحرك

في أغلب الأحيان ، لا يكتب المطورون المتمرسون كل هذه الخصائص بشكل منفصل ، ولكن يستخدمون تدوينًا قصيرًا ويكون هيكلها كما يلي:

الرسوم المتحركة: (1.اسم الحيوان - الاسم) (2. مدة الرسوم المتحركة - المدة) (3. ديناميات وظيفة الرسوم المتحركة والتوقيت والحركة) (4.تأخير للرسوم المتحركة - وقفة قبل البدء) (5.تكرار للرسوم المتحركة- العد - عدد عمليات الإعدام) (6. اتجاه الرسوم المتحركة - الاتجاه)

الرسوم المتحركة: اسم الرسوم المتحركة 2s الخطي 1 ثانية عكس لانهائي

من المثال ، نرى أننا نشير إلىkeyframes animationname block ، ونضبط مدة الرسوم المتحركة على ثانيتين ، وتكون الديناميكيات خطية ، والتوقف المؤقت قبل البدء هو ثانية واحدة ، وتتكرر الرسوم المتحركة إلى ما لا نهاية وتعمل في الاتجاه المعاكس.

كما قلت سابقًا ، يبدأ الرمز المختصر بـ " حيوية"، متبوعة بالقيم التي من الأفضل عدم نسيان تسلسلها حتى لا يحدث التباس عند كتابة الرسوم المتحركة CSS.

ومع ذلك ، يمكن حذف معظم هذه الخصائص ، نظرًا لأن قيمها الافتراضية تناسب معظم احتياجات الرسوم المتحركة في معظم الأوقات. يمكن حذف بعضها ، ولكن يجب الإشارة إلى الباقي بالتسلسل الذي اعتبرناه سابقًا. بشكل عام ، لكي تعمل الرسوم المتحركة ، تحتاج فقط إلى معلمتين في الخاصية المركبة - الاسم ( اسم الرسوم المتحركة) والمدة ( مدة الرسوم المتحركة).