كيفية استخدام CSS3 Transitions and Transforms لإنشاء رسوم متحركة

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

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

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

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

يترجم

تقوم طريقة translate() بنقل عنصر من موضعه الحالي إلى موقع جديد.
باستخدام هذا الرمز ، يتم نقل المستطيل المعدل بمقدار 40 بكسل إلى اليمين ، و 100 بكسل لأسفل من الموضع الحالي.

 -ms-transform: translate(40px, 100px); /* IE 9 */ -webkit-transform: translate(40px, 100px); /* Safari */ transform: translate(40px, 100px);

استدارة

تقوم طريقة rotate() بتدوير عنصر في اتجاه عقارب الساعة أو عكس اتجاه عقارب الساعة بواسطة قيمة الدرجة المحددة. يقوم هذا الرمز بتدوير المستطيل في اتجاه عقارب الساعة بمقدار 40 درجة.

 -ms-transform: rotate(40deg); /* IE 9 */ -webkit-transform: rotate(40deg); /* Safari */ transform: rotate(40deg);

حجم

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

 -ms-transform: scale(2, 3); /* IE 9 */ -webkit-transform: scale(2, 3); /* Safari */ transform: scale(2, 3);

SkewX

باستخدام skewX() ، سيتأثر المحور السيني فقط. هذا المستطيل منحرف بمقدار 30 درجة على المحور السيني:

 -ms-transform: skewX(30deg); /* IE 9 */ -webkit-transform: skewX(30deg); /* Safari */ transform: skewX(30deg);

انحراف

هذه هي نفس الفكرة ، لكن على المحور ص. تقوم طريقة skewY() الانحراف بإمالة عنصر على طول المحور الصادي بالزاوية المحددة. هذا المستطيل منحرف بمقدار 30 درجة على المحور ص.

 -ms-transform: skewY(30deg); /* IE 9 */ -webkit-transform: skewY(30deg); /* Safari */ transform: skewY(30deg); }

انحراف

إذا كنت تريد انحراف كل من المحور x والمحور y ، فيمكن القيام بذلك في مكان واحد. تقوم طريقة skew() بإمالة عنصر على طول المحور x والمحور y باستخدام الزوايا المحددة. المثال التالي يميل عنصر المستطيل بمقدار 30 درجة على المحور x و 20 درجة على المحور x.

 -ms-transform: skew(30deg, 20deg); /* IE 9 */ -webkit-transform: skew(30deg, 20deg); /* Safari */ transform: skew(30deg, 20deg);

مصفوفة

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

إليك مخطط أساسي يجب اتباعه:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

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

لعمل هذا المثال ، إليك قيم المصفوفة:

 -ms-transform: matrix(2, -0.3, 0, 1, 0, 0); /* IE 9 */ -webkit-transform: matrix(2, -0.3, 0, 1, 0, 0); /* Safari */ transform: matrix(2, -0.3, 0, 1, 0, 0);

كيفية استخدام انتقالات CSS3

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

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

إذا كنت تحدد الكثير من القيم ، فسيكون الاختصار مفيدًا. خاصية CSS transition هي خاصية اختصار transition-property ، transition-duration ، transition-timing-function ، transition-delay .

تفاصيل الانتقال

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

تعد transition-duration مفيدة في إجراء التغييرات في الخاصية خلال فترة زمنية محددة بدلاً من حدوثها فورًا. سترى الثواني والملي ثانية كقيم محتملة.

 transition-duration: 7s; transition-duration: 120ms; transition-duration: 2s, 3s; transition-duration: 10s, 30s, 230ms;

تتيح لك خاصية CSS transition-timing-function إنشاء منحنى تسريع ، بحيث يمكن أن تختلف سرعة الانتقال على مدار مدته. هناك العديد من الخيارات للتجربة.

 transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

transition-delay واضح بذاته. تحدد القيمة المحددة عدد الثواني أو المللي ثانية للانتظار قبل أن يبدأ تأثير الانتقال. Initial سيحدد الخاصية على قيمتها الافتراضية. إذا تم تحديد inherit ، فهذا يعني أنه يرث الخاصية من العنصر الأصل.

 Here are all the properties: transition-property: background; //all transition-duration: 1s; transition-timing-function: linear; //other options are ease transition-delay: 0.5s;

إليك إعداد الاختصار الأساسي للانتقال:

 div { transition: [property] [duration] [timing-function] [delay]; }

تسلسل الاختزال الكامل:

 div { transition: background 1s linear 0.5s; }

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

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

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

نقل صورة باستخدام CSS Transform Property

قبل أن ندخل في عمليات تحويل وانتقالات معقدة ، فلنتحدث عن الإحداثيات على شبكة المحور. (تنبيه: قد يعيد هذا ذكريات ورقة الرسم البياني من الدورات الدراسية للرياضيات.) تُستخدم الإحداثيات لتحريك الصورة.

إحداثيات X و Y

ستبدو الأمور مختلفة قليلاً عما قد تتوقعه. القيمة -y أعلى من المحور x. تستخدم HTML و CSS ما يسمى "نظام إحداثيات ديكارتية معكوسة" ، لأن صفحات الويب تبدأ من أعلى اليسار وتقرأ لأسفل.

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

لقد تطرقنا لفترة وجيزة إلى قاعدة الترجمة () وكيف يمكنها تحريك عنصر. عند وضعها موضع التنفيذ ، يمكنها حقًا أن تطفو قاربك ، حرفيًا. كما تعلمنا أعلاه ، تنقل طريقة translate () عنصرًا من موضعه الحالي (وفقًا للمعلمات المعطاة للمحور x والمحور y).

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

لنقله من موضعه الأولي باستخدام transform: translate(x,y) ، يجب تحديد قيمتين جديدتين. لجعل الغواصة تتحرك يمينًا وأعلى ، يجب أن تكون قيمة x موجبة وقيمة y يجب أن تكون سالبة. إذا تم ضبط قيمة y على 0 ، فسوف تنتقل إلى اليمين فقط وليس لأعلى.

غواصة تصعد للهواء مع تحويل ()

في هذا المثال ، سنقوم بتحريك الكائن 200 بكسل إلى اليمين و 25 بكسل لأعلى. الصيغة هي transform: translate(200px,-25px); وسوف يتحرك الجسم .underwater . من خلال إنشاء أنماط للحركة في .underwater:hover .move-right ، سيحدث الإجراء عند التمرير.

هنا هو البداية HTML:

 <div class="underwater"> <div class="object submarine move-right"> <!-- image is set as a background image on submarine --> </div> </div>

شاهد هذا على Codepen.

لا يتطلب الأمر كثيرًا من CSS لعمل هذه الرسوم المتحركة الأساسية:

 .underwater { position: relative; min-height: 600px; background-color: #4fc3da; } .underwater:hover .move-right{ transform: translate( 200px ,-25px ); -webkit-transform: translate( 200px ,-25px ); /** Chrome & Safari **/ -ms-transform: translate( 200px ,-25px ); /** Firefox **/ } .submarine { height: 200px; background: url("little-submarine.svg") no-repeat; } .object { transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/ -ms-transition: all 2s ease-in-out; /** Opera **/ }

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

تبدو الأمور سلسة بسبب الانتقال. تم تعيين transition-duration على 2sec ، وهي ليست سريعة جدًا لهذه الرسوم المتحركة. تم ضبط transition-timing-function على ease-in-out مما يمنحها بداية ونهاية أبطأ. إذا تمت زيادة المدة الزمنية إلى شيء أكبر ، فسيكون ذلك واضحًا جدًا.

الرسوم المتحركة الأساسية الثانية: الحركة الأفقية مع الإطارات الرئيسية والرسوم المتحركة

يتم استخدام التحويل بشكل مختلف قليلاً في هذا المثال. سيتم استخدام Keyframes وخاصية الرسوم المتحركة لإنشاء الرسوم المتحركة التالية.

أساسيات Keyframe

إن Inside @keyframes هو المكان الذي تحدد فيه أنماط ومراحل الرسوم المتحركة. إليك المثال الذي سنستخدمه ، والذي سيساعد في إعطاء تأثير "التلاشي أثناء التحرك لأسفل":

 @keyframes fadeInDown { 0% { opacity: .8; transform: translate(0, 0); } 100% { opacity: 1; transform: translate(0, 30px); } }

يتم دمج قيم التحويل في الإطارات الرئيسية. تم تعيين الموضع الأصلي على 0٪ ، وعند 100٪ ، سينخفض ​​الموضع بمقدار 30 بكسل.

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

لاستخدام الرسوم المتحركة CSS3 ، عليك تحديد إطارات مفتاحية للرسوم المتحركة.

كما هو مذكور أعلاه ، يحتفظ @keyframes بأنماط العنصر في أوقات معينة.

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

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

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

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

فيما يلي بعض الأمثلة على الخصائص الفرعية للرسوم المتحركة:

• اسم الحركة: اسم @keyframesat-rule ، التي تصف الإطارات الرئيسية للرسوم المتحركة. الاسم fadeOut في المثال السابق هو مثال على animation-name .
• مدة الرسوم المتحركة: المدة الزمنية التي يجب أن تستغرقها الرسوم المتحركة لإكمال دورة كاملة واحدة.
• وظيفة توقيت الرسوم المتحركة: توقيت الرسوم المتحركة ، وتحديدًا كيفية انتقال الرسوم المتحركة عبر الإطارات الرئيسية. هذه الوظيفة لديها القدرة على إنشاء منحنيات التسارع. الأمثلة linear ، ease ، ease-in ease-out ، ease-in-out ، أو cubic-bezier .
• تأخير الحركة: تأخير بين وقت تحميل العنصر وبداية الرسم المتحرك.
• Animation-iteration-count: عدد مرات تكرار الرسم المتحرك. هل تريد أن تستمر الرسوم المتحركة إلى الأبد؟ يمكنك تحديد infinite لتكرار الرسم المتحرك إلى أجل غير مسمى.
• اتجاه الحركة: يحدد هذا ما إذا كان يجب على الرسم المتحرك تبديل الاتجاه أم لا في كل مرة خلال التسلسل أو إعادة تعيينه إلى نقطة البداية وتكرار نفسه.
• وضع تعبئة الرسوم المتحركة: القيم التي يتم تطبيقها بواسطة الرسوم المتحركة قبل وبعد تنفيذها.
• حالة تشغيل الرسوم المتحركة: باستخدام هذا الخيار ، يمكنك إيقاف تسلسل الرسوم المتحركة مؤقتًا واستئنافه. الأمثلة none ، أو forwards ، أو backwards ، أو both .

 .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; animation-iteration-count: 1; }

هذا ما سيبدو عليه الأمر باختصار:

 animation: 4s ease-in-out 1 paused fadeInDown;

ها هي بنية HTML:

 <div class="underwater"> <div class="content-wrap fadeInDown"> <div class="submarine"></div> <h2>Cute Submarine</h2> <p>Text here.</p> </div> </div>

تعمل فئة fadeInDown على تحريك الغواصة والمحتوى لأعلى ولأسفل.

جعل الرسوم المتحركة أكثر سلاسة عن طريق ضبط الإطارات الرئيسية

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

 @keyframes fadeInDown { 0% { opacity: .8; transform: translateY(5px); } 25% { opacity: .9; transform: translateY(15px); } 50% { opacity: 1; transform: translateY(30px); } 75% { opacity: 1; transform: translateY(15px); } 100% { opacity: .9; transform: translateY(0); } }

شاهد هذا على Codepen.

ضبط توقيت الرسوم المتحركة

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

سيتم تطبيق الفئات الفعالة في HTML:

 <div class="underwater"> <div class="submarine move-down fadeInDown"> </div> <div class="moving-content move-down text-delay fadeInDownText"> <p>Text goes here.</p> </div> </div>

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

 @keyframes fadeInDown { 0% { opacity: .8; transform: translateY(0); } 25% { opacity: 1; transform: translateY(15px); } 50% { opacity: 1; transform: translateY(30px); } 75% { opacity: 1; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInDownText { 0% { opacity: .8; transform: translateY(0); } 100% { opacity: 1; transform: translateY(35px); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } .fadeInDownText { -webkit-animation-name: fadeInDownText; animation-name: fadeInDownText; } .move-down{ -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1 } .text-delay { -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */ animation-delay: 2s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }

شاهد هذا على Codepen.

شريط التقدم المكعب في الرسوم المتحركة CSS3

حان الوقت للاحتفال بتقدم الرسوم المتحركة لدينا من خلال صنع شريط تقدم!

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

هنا هو البداية HTML:

 <div class="container"> <div class="row"> <div class="masthead"> <p>CSS3 Loading Bar</p> </div> </div> <div class="fast-loader"></div> </div>

و CSS لجعلها تنبض بالحياة:

 @keyframes speedSetting { 0% { width: 0px; } 100% { width: 100%; } } @keyframes progressMotion { 0% { opacity: 1; } 50% {opacity: 1; } 100% { opacity: 0; } } .fast-loader { width: 0px; height: 10px; background: linear-gradient(to left, blue,rgba(255,255,255,.0)); animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite; -webkit-animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite; }

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

منحنى CSS بيزير

يمكن استخدام الدالة cubic-bezier() مع خاصية transition-timing-function للتحكم في كيفية تغيير سرعة الانتقال خلال مدته. سترى هذا في الرسوم المتحركة. انظر كيف تبدأ بشكل أبطأ قليلاً ثم تسرع وتيرتها؟

من المفيد تصوير غلاف بيزير على شكل مربع. الجزء السفلي الأيسر والأيمن العلوي هما الأماكن التي توجد فيها النقاط الرئيسية ، وهي P0 و P3. يتم تعيين هذه دائمًا على (0،0) و (1،1) ، والتي لا تتغير. ومع ذلك ، يمكن نقل P1 و P2 باستخدام وظيفة cubic-bezier() إذا قمت بتحديد نقاط جديدة بقيمة x أو y.

• x1 هو إحداثي x لنقطة التحكم p1
• y1 هو الإحداثي y لنقطة التحكم p1
• x2 هو إحداثي x لنقطة التحكم p2
• y2 هو الإحداثي y لنقطة التحكم p2

فيما يلي بعض الأمثلة على القيم:

س 1 = .7
ص 1 = .16
س 2 = .2
y2 = .9

لذلك قد يبدو المثال كالتالي:

 cubic-bezier(.7,.16,.2,.9)

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