كيفية التحريك باستخدام CSS

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

بينما يتم تحقيقها تقليديًا باستخدام ملفات GIF و SVG و WebGL ومقاطع فيديو الخلفية ، يمكن أيضًا إنشاء الرسوم المتحركة بكفاءة باستخدام CSS. لقد تحسن دعم المستعرض للرسوم المتحركة لـ CSS بشكل كبير وأصبح شائعًا للغاية - تشمل المتصفحات المتوافقة Firefox 5+ و IE 10+ و Chrome و Safari 4+ و Opera 12+.

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

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

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

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

@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

تتضمن أساسيات إطار مفتاح fadeout الذي أنشأناه للتو ما يلي:

• اسم وصفي: في هذه الحالة ، fadeOut.
• مراحل الرسم المتحرك: من تم ضبطه على 0٪ وإلى 100٪.
• أنماط CSS التي سيتم تطبيقها في كل مرحلة.

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

إجراءات محددة مع الخصائص الفرعية للرسوم المتحركة

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

تُستخدم خاصية الرسوم المتحركة لاستدعاء @keyframes داخل محدد CSS. يمكن أن تحتوي الرسوم المتحركة وستحتوي غالبًا على أكثر من خاصية فرعية واحدة. فيما يلي أمثلة على الخصائص الفرعية:

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

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

• اسم الحركة : اسم @keyframes at-rule ، الذي يصف الإطارات الرئيسية للرسوم المتحركة. الاسم fadeOut في المثال السابق هو مثال على اسم الحركة.
• مدة الرسوم المتحركة: المدة الزمنية التي يجب أن تستغرقها الرسوم المتحركة لإكمال دورة كاملة واحدة.
• وظيفة توقيت الرسوم المتحركة: توقيت الرسوم المتحركة ، وتحديدًا كيفية انتقال الرسوم المتحركة عبر الإطارات الرئيسية. هذه الوظيفة لديها القدرة على إنشاء منحنيات التسارع. الأمثلة خطية ، أو سهلة ، أو سهلة ، أو سهلة الخروج ، أو سهلة الداخل للخارج ، أو بيزير مكعب .
• تأخير الحركة : تأخير بين وقت تحميل العنصر وبداية الرسم المتحرك.
• Animation-iteration-count: عدد مرات تكرار الرسم المتحرك. تريد الرسوم المتحركة أن تستمر إلى الأبد؟ يمكنك تحديد لانهائي لتكرار الرسوم المتحركة إلى أجل غير مسمى.
• اتجاه الرسوم المتحركة: ما إذا كان يجب على الرسم المتحرك تغيير الاتجاه أم لا في كل عملية تشغيل خلال التسلسل أو إعادة تعيينه إلى نقطة البداية وتكرار نفسه.
• وضع تعبئة الرسوم المتحركة: القيم التي يتم تطبيقها بواسطة الرسوم المتحركة قبل وبعد التنفيذ.
• حالة تشغيل الرسوم المتحركة: باستخدام هذا الخيار ، يمكنك إيقاف تسلسل الرسوم المتحركة مؤقتًا واستئنافه. الأمثلة لا شيء ، أو الأمام ، أو الخلف ، أو كلاهما .

ضع كل ذلك معًا للحصول على أفضل دعم للمتصفح

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

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

• Chrome & Safari: -webkit-
• فايرفوكس: -moz-
• إنترنت إكسبلورر: -ms-

لا يتطلب Internet Explorer 10 بادئة للانتقالات ، لكن كل التحويلات تتطلب البادئة. تمت تغطية Opera لأنه يتعرف على أنماط WebKit.

بداية الانتقال

• -webkit-transition
• -moz-transition
• transition

بداية التحويل:

• -webkit-transform
• -moz-transform
• -ms-transform
• transform

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

الآن بعد أن غطينا الأساسيات ، دعنا ننشئ بعض التعليمات البرمجية لاستخدامها!

الرسوم المتحركة الأولى: دائرة إلى مربع

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

يُعد إنشاء عنصر div للبدء به طريقة رائعة لاختبار الرسوم المتحركة:

<div class=”animationOne”>
</div>

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

@-webkit-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-moz-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-ms-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

الآن ، دعنا ننشئ بعض الأنماط لتحديد نصف قطر الحد الذي سيظهر في كل مرحلة:

@keyframes circle-to-square {
0%  {
border-radius:50%;
}
25%  {
border-radius:50% 50% 50% 0;
}
50%  {
border-radius:50% 50% 0 0;
}
75%  {
border-radius:50% 0 0 0;
}
100% {
border-radius:0 0 0 0;
}
}

أضف الآن خاصية background-color للمساعدة في تمييز كل مرحلة من مراحل الرسوم المتحركة:

@keyframes circle-to-square {
0%  {
border-radius:50%;
background-color: #6a9bea;
}
25%  {
border-radius:50% 50% 50% 0;
background-color: #90b3ec;
}
50%  {
border-radius:50% 50% 0 0;
background-color: #b0c7ec;
}
75%  {
border-radius:50% 0 0 0;
background-color: #cad7ec;
}
100% {
border-radius:0 0 0 0;
background-color: #dfe3e9;
}
}

أخيرًا ، دعنا نطبق الرسوم المتحركة على اختبار div:

.animationOne {
width: 200px;
height: 200px;
-webkit-animation: circle-to-square 2s 1s infinite alternate;
-moz-animation: circle-to-square 2s 1s infinite alternate;
-ms-animation: circle-to-square 2s 1s infinite alternate;
animation: circle-to-square 2s 1s infinite alternate;
}

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

• اسم الحركة هو circle-to-square .
• مدة الرسوم المتحركة 2s .
• تأخر الرسوم المتحركة هو 1s .
• عدد مرات تكرار الرسوم المتحركة infinite ، لذلك سيستمر إلى أجل غير مسمى.
• واتجاه الحركة alternate . هذا يعني أنها ستلعب من البداية إلى النهاية وتعود إلى البداية.

الرسوم المتحركة الثانية: الدوران

تسمح هذه الرسوم المتحركة بتدوير كائن.

@keyframes full-rotate {
0%  {
transform: rotate(0deg);
}
25%  {
transform: rotate(45deg);
}
50%  {
transform: rotate(90deg);
}
75%  {
transform: rotate(135deg);
}
100% {
transform: rotate(180deg);
}
}

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

مدة هذه الرسوم المتحركة ثانيتان ، مع تأخير لمدة ثلاث ثوان. عدد مرات تكرار الرسوم المتحركة هو خمسة ، لذلك سيتم تحريك هذا المشروع خمس مرات قبل أن يتوقف. يتم تشغيل الرسوم المتحركة في الاتجاه المعاكس في كل مرة (1،3،5 ، ...) وفي اتجاه طبيعي في كل مرة (2،4،6 ، ...).

.animationTwo {
width: 200px;
height: 200px;
background-color: #ccc;
animation: full-rotate 2s 3s 5 alternate-reverse;
}

الرسوم المتحركة الثالثة: توسيع وميض

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

@keyframes button-flicker {
0% {
transform: scale(1);
}
30% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(1);
}
60% {
transform: scale(1);
}
70% {
transform: scale(1.05);
}
80% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}

.btn.pulse {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
animation: button-flicker 5000ms infinite linear;
}

لاستخدام اختبار هذا ، نحتاج إلى قسم المبدئ التالي:

.animationThree {
width: 200px;
height: 200px;
}

<div class=”animationThree>
<a class="btn pulse" href="">Click me</a>
</div>

الرسوم المتحركة الرابعة: شريحة نصية
دعنا نضيف بعض الرسوم المتحركة إلى النص. هذا المشروع يجعل الشريحة النصية الخاصة بك مرة واحدة من اليسار.

@keyframes slide-text {
from {
margin-left: 100%;
width: 200%;
}

to {
margin-left: 0%;
width: 100%;
}
}

h1.slide {
animation-name: slide-text;
animation-duration: 3s;
}

الرسوم المتحركة الخامسة: تتلاشى

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

@keyframes fade {
from {
opacity: 0;
}

to {
opacity: 1;
}

}

.animationFive {
width: 200px;
height: 200px;
}

.animationFive img{
animation-name: fade;
animation-duration: 3s;
}

<div class=”animationFive”>
<img src=".." />
</div>

الرسوم المتحركة CSS3 رائعة لتحريك موقع الويب الخاص بك وتحريكه! الآن بعد أن أصبحت لديك المفاهيم الأساسية لإنشاء الرسوم المتحركة ، فإن إمكانيات الرسوم المتحركة لا حصر لها. ماذا ستحرك؟