25 مثالًا رائعًا للرسوم المتحركة CSS لإعادة إنشائها

مثال على الماوس للرسوم المتحركة
(رصيد الصورة: دونوفان هاتشينسون)
صفحة 1 من 2: دروس الرسوم المتحركة CSS

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

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

ما هي الرسوم المتحركة CSS؟

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



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

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

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

01. تأثير الماوس المرح

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

نحتاج إلى القليل جدًا من HTML لهذا التأثير:

أولاً ، نضع العرض التوضيحي ونضع منظورًا للتحويل ثلاثي الأبعاد الخاص بنا:

.demo { background-color: hsl(207, 9%, 19%); display: flex; align-items: center; justify-content: center; height: 100vh; width: 100%; } .perspective-container { perspective: 800px; }

ثم صمم div الذي نريد تحريكه:

.card { background-image: url(https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif); background-size: cover; box-shadow: 0 0 140px 10px rgba(0,0,0,.5); position: relative; height: 300px; width: 500px; overflow: hidden; /* Try removing this to see how the sheen works! */ --sheenX: 0; /* Set these with JavaScript */ --sheenY: 0; }

هنا نضع الخلفية ، ثم نضعها تجاوز إلى مختفي حتى نتمكن من إضافة لمعان التأثير لاحقًا. وضعنا أيضا متغيرات css و لمعان و براق .

ستساعد متغيرات اللمعان هذه في وضع تأثير اللمعان. نستخدمها في بطاقتنا بعد، بعدما العنصر الزائف:

.card::after { content: ''; position: absolute; top: -400px; right: -400px; bottom: -400px; left: -400px; background: linear-gradient(217deg, rgba(255,255,255,0), rgba(255,255,255,0) 35%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%); transform: translateX(var(--sheenX)) translateY(var(--sheenY)); }

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

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

document.onmousemove = handleMouseMove ؛

نحن الآن بحاجة إلى ملف مقبض الماوس وظيفة للتعامل معها onmousemove :

function handleMouseMove(event) { const height = window.innerHeight; const width = window.innerWidth; // Creates angles of (-20, -20) (left, bottom) and (20, 20) (right, top) const yAxisDegree = event.pageX / width * 40 - 20; const xAxisDegree = event.pageY / height * -1 * 40 + 20; target.style.transform = `rotateY(${yAxisDegree}deg) rotateX(${xAxisDegree}deg)`; // Set the sheen position setSheenPosition(event.pageX / width, event.pageY / width); }

تأخذ وظيفتنا ارتفاع النافذة وعرضها وتخلق زاوية على محوري X و Y. ثم وضعنا هذه على تحول أسلوبنا بطاقة . هذا يعطي البطاقة زاوية تعتمد على الماوس!

نسمي دالة بعد ذلك لتعيين موضع العنصر الزائف:

function setSheenPosition(xRatio, yRatio) { // This creates a 'distance' up to 400px each direction to offset the sheen const xOffset = 1 - (xRatio - 0.5) * 800; const yOffset = 1 - (yRatio - 0.5) * 800; target.style.setProperty('--sheenX', `${xOffset}px`) target.style.setProperty('--sheenY', `${yOffset}px`) }

يبدو العنصر الزائف أفضل عندما يتحرك في الاتجاه المعاكس للماوس. لتحقيق ذلك نقوم بإنشاء رقم بين -0.5 و 0.5 يتغير في الاتجاه المعاكس عن طريق حساب النسبة بمقدار -1.

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

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

لدينا الآن بطاقة تدور لتواجه الماوس بينما يتحرك تأثير اللمعان في الاتجاه المعاكس في الأعلى. هذا يخلق تأثيرًا لطيفًا ولافت للنظر.

02. الكشف الكبير

  • مؤلف: آدم كوهن

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

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

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

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

03. الترنح على

  • مؤلف: آدم كوهن

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

كيفية الخروج من اللاسو المغناطيسي

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

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

هذه حالة استخدام جيدة بشكل خاص للمعالجات الأولية مثل SCSS أو LESS ، والتي تتيح لنا استخدام ملف @بالنسبة حلقة للتكرار خلال كل عنصر.

#parent{ .child{ animation: animationName 1.5s ease-in-out 1 forwards; @for $i from 1 through 20{ &:nth-of-type(#{$i}){ animation-delay:#{$i/10}s; } } } }

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

04. Squigglevision

  • مؤلف: آدم كوهن

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

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

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

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

05. هبوط الحروف

الرسوم المتحركة لـ CSS: حروف متقطعة

تتميز لعبة العام من Google برسوم متحركة مرحة لـ CSS على الصفحة الرئيسية ، حيث تتدحرج كلمات العنوان وتتصادم مع بعضها البعض. إليك كيف تم ذلك.

الخطوة الأولى هي تحديد مستند صفحة الويب باستخدام HTML. يتكون من حاوية مستند HTML ، والتي تخزن قسم الرأس والجسم. أثناء استخدام قسم الرأس لتحميل موارد CSS و JavaScript الخارجية ، يتم استخدام النص الأساسي لتخزين محتوى الصفحة.

Off Kilter Text Animation

The Animated Title

The Animated Title

The Animated Title

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

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

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



window.addEventListener('load', function(){ var delay = 2; var nodes = document.querySelectorAll ('.animate'); for(var i=0; i

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

.animate span{ display: block; position: relative; text-align: center; }

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

لاحظ كيف لا توجد مسافة بين ملف مفعم بالحيوية و إلى الوراء مرجع الفئة ، مما يعني أن العنصر الرئيسي يجب أن يحتوي على كليهما.

.animate.backwards > span{ animation: animateBackwards 1s ease-in-out forwards; } .animate.forwards > span{ animation: animateForwards 1s ease-in-out forwards; }

يتم تعريف الرسوم المتحركة المختلطة باستخدام نفس الإعدادات المستخدمة في الرسوم المتحركة للأمام والخلف. بدلاً من تطبيق الرسوم المتحركة على كل طفل من الأبوين ، فإن nth- الطفل محدد يستخدم لتطبيق إعدادات الرسوم المتحركة البديلة. يتم تطبيق الرسوم المتحركة العكسية على كل حتى -رقم الطفل ، بينما يتم تطبيق الرسوم المتحركة إلى الأمام على كل الفردية -عدد الطفل.

.animate.mixed > span:nth-child(even){ animation: animateBackwards 1s ease-in-out forwards; } .animate.mixed > span:nth-child(odd){ animation: animateForwards 1s ease-in-out forwards; }

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

@keyframes animateForwards { from { top: 0; transform: rotate(0deg); } to { top: .9em; transform: rotate(-15deg); } } @keyframes animateBackwards { from { top: 0; transform: rotate(0deg); } to { top: 1em; transform: rotate(25deg); } }

06. فليب بوك

  • مؤلف: آدم كوهن

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

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

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

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

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

animation:runner 0.75s steps(32, end) infinite;

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

@keyframes runner{ from{ background-position:0px 50%;} to{ background-position:- 1280px 50%; }}

لاحظ أن الموضع الرأسي للصورة متناسق طوال الوقت ، مما يخبرنا أن النقوش المتحركة ممتدة أفقيًا عبر الصورة ، والتي يبلغ عرضها الإجمالي 1280 بكسل. نظرًا لأننا حددنا 32 إطارًا إجماليًا لتلك الصورة ، يمكننا استنتاج أن كل إطار يجب أن يكون عرضه 40 بكسل. تحقق من هذا Codepen أدناه.

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

07. نفخ الفقاعات

تعد الرسوم المتحركة للفقاعات CSS التي تظهر على 7UP مثالًا رائعًا على حمل سمة العلامة التجارية في تصميم موقع الويب. يتكون الرسم المتحرك من عدة عناصر: 'رسم' SVG للفقاعات ثم رسمان متحركان يتم تطبيقهما على كل فقاعة.

كيف تحافظ على خصوصية الصور على الفيسبوك

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

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

... ...

من أجل تطبيق رسمين متحركين منفصلين على SVGs لدينا ، كلاهما يستخدم خاصية التحويل ، نحتاج إلى تطبيق الرسوم المتحركة على عناصر منفصلة. ال يمكن استخدام عنصر في SVG مثل div في HTML ؛ نحتاج إلى التفاف كل فقاعات لدينا (الموجودة بالفعل في مجموعة) في علامة المجموعة.

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

@keyframes up { 0% { opacity: 0; } 10%, 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1024px); } }

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

@keyframes wobble { 33% { transform: translateX(-50px); } 66% { transform: translateX(50px); } }

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

.bubbles-large > g { opacity: 0; will-change: transform, opacity;} .bubbles-large g:nth-of-type(1) {...} ... .bubbles-small g:nth-of-type(10) {...}

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

.bubbles-large g:nth-of-type(1) { animation: up 6.5s infinite; } .bubbles-large g:nth-of-type(1) circle { animation: wobble 3s infinite ease-in-out; } ... bubbles-small g:nth-of-type(9) circle { animation: wobble 3s 275ms infinite ease-in-out; } .bubbles-small g:nth-of-type(10) { animation: up 6s 900ms infinite;}

08. تمرير الماوس

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

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

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

.scroll-link { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); } .mouse { max-width: 2.5rem; width: 100%; height: auto; }

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

@keyframes scroll { 0%, 20% { transform: translateY(0) scaleY(1); } }

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

@keyframes scroll { ... 10% { opacity: 1; } 100% { transform: translateY(36px) scaleY(2); opacity: 0.01; } }

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

.scroll { animation-name: scroll; animation-duration: 1.5s; animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, 1.500); animation-iteration-count: infinite; transform-origin: 50% 20.5px; will-change: transform; }

09. الكتابة المتحركة

الرسوم المتحركة CSS: الكتابة

علم تصميم المخلوق: فهم تشريح الحيوان
انقر لرؤية الرسوم المتحركة في العمل

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

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

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

10. الطيور الطائرة

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

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

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

.bird { background-image: url('bird.svg'); background-size: auto 100%; width: 88px; height: 125px; will-change: background-position; } @keyframes fly-cycle { 100% { background-position: -900px 0; } }

تحتوي رسوم CSS للرسوم المتحركة على حيلتين قد لا تكون على دراية بهما. يمكننا استخدام وظيفة توقيت الرسوم المتحركة لإظهار الصورة في خطوات - يشبه إلى حد كبير التمرير عبر الصفحات في دفتر ملاحظات للإشارة إلى الرسوم المتحركة.

animation-name: fly-cycle; animation-timing-function: steps(10); animation-iteration-count: infinite; animation-duration: 1s; animation-delay: -0.5s;

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

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

.bird--one { animation-duration: 1s; animation-delay: -0.5s; } .bird--two { animation-duration: 0.9s; animation-delay: -0.75s; }

11. اعبر الهامبرغر

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

نظرًا للطبيعة المتحركة و SVG و DOM القابل للتنقل ، فإن الكود الخاص بإنجاز الرسوم المتحركة أو الانتقال يتغير قليلاً جدًا - الأسلوب هو نفسه.

نبدأ بإنشاء أربعة عناصر ، سواء كانت تمتد داخل div أو مسارات داخل SVG. إذا كنا نستخدم الامتدادات ، نحتاج إلى استخدام CSS لوضعهم داخل div ؛ إذا كنا نستخدم SVG ، فهذا أمر يتم الاهتمام به بالفعل. نريد وضع الخطين 2 و 3 في الوسط - أحدهما فوق الآخر - أثناء تباعد الأسطر 1 و 4 بشكل متساوٍ فوق وتحت ، مع التأكد من توسيط أصل التحويل.

سوف نعتمد على نقل خاصيتين: التعتيم والدوران. بادئ ذي بدء ، نريد إخفاء السطور 1 و 4 ، والتي يمكننا استهدافها باستخدام : nth-child محدد.

.menu-icon.is-active {element-type}:nth-child(1), .menu-icon.is-active {element-type}:nth-child(4) { opacity: 0; }

الشيء الوحيد المتبقي هو استهداف الخطين الأوسطين وتدويرهما 45 درجة في اتجاهين متعاكسين.

.menu-icon.is-active {element-type}:nth-child(2) { transform: rotate(45deg); } .menu-icon.is-active {element-type}:nth-child(3) { transform: rotate(-45deg); }

12. مطاردة الدوائر

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

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

circle:nth-of-type(1) { stroke-dasharray: 550; } circle:nth-of-type(2) { stroke-dasharray: 500; } circle:nth-of-type(3) { stroke-dasharray: 450;} circle:nth-of-type(4) { stroke-dasharray: 300; }

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

@keyframes preloader { 50% { transform: rotate(360deg); } }

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

animation-name: preloader; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;

في الوقت الحالي ، لدينا محملنا ، لكن كل العناصر تدور معًا في نفس الوقت. لإصلاح ذلك ، سنطبق بعض التأخيرات. سننشئ التأخيرات باستخدام Sass for loop.

@for $i from 1 through 4 { &:nth-of-type(#{$i}) { animation-delay: #{$i * 0.15}s; } }

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

animation-delay: -#{$i * 0.15}s;

الصفحة التالية: المزيد من أمثلة الرسوم المتحركة لـ CSS لاستكشافها

الصفحه الحاليه: دروس الرسوم المتحركة CSS

الصفحة التالية تأثيرات الرسوم المتحركة CSS