ما هي انتقالات CSS وكيفية استخدامها

نشرت: 2022-02-16

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

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

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

لنبدأ!

الخطوة 1. - التخطيط المقترح

انتقالات CSS وكيفية استخدامها

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

الخطوة رقم 2. - HTML

افتح محرر الكود المفضل لديك
قم بإنشاء ملف HTML يسمى index.html
انسخ وآلصق هذه الشفرة:

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>CSS Transitions</title>
 <link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <div class="experts">
 <h2>What We Do</h2>
 <div class="service-card-container">
 <div class="service-card">
 <div class="front">
 <span class="icon-strategy"></span>
 <h3>Strategy</h3>
 </div>
 <div class="hidden">
 <p>The main strategy of a web site is to make visitors convert.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-ui-ux-design"></span>
 <h3>UI / UX Design</h3>
 </div>
 <div class="hidden">
 <p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-development"></span>
 <h3>Development</h3>
 </div>
 <div class="hidden">
 <p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-digital-marketing"></span>
 <h3>Digital Marketing</h3>
 </div>
 <div class="hidden">
 <p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </body>
 </html>

فتح في المنبثقة

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>CSS Transitions</title>
 <link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <div class="experts">
 <h2>What We Do</h2>
 <div class="service-card-container">
 <div class="service-card">
 <div class="front">
 <span class="icon-strategy"></span>
 <h3>Strategy</h3>
 </div>
 <div class="hidden">
 <p>The main strategy of a web site is to make visitors convert.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-ui-ux-design"></span>
 <h3>UI / UX Design</h3>
 </div>
 <div class="hidden">
 <p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-development"></span>
 <h3>Development</h3>
 </div>
 <div class="hidden">
 <p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-digital-marketing"></span>
 <h3>Digital Marketing</h3>
 </div>
 <div class="hidden">
 <p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </body>
 </html>

191125 انتقالات css 001

تحتوي حاوية بطاقة الخدمة على 4 بطاقات مختلفة. تتكون كل بطاقة من رمز وعنوان وبعض النصوص ورابط للمعلومات المقابلة على الموقع. سيظهر النص والرابط عند التمرير فوق البطاقة ، وإلا فسيتم إخفاؤهما.

الخطوه 3. - أنماط CSS الأساسية

قم بإنشاء ملف CSS وقم بتسميته style.css - في كود HTML يوجد بالفعل رابط لهذا الملف وخطوط Google
انسخ والصق هذه الأنماط لتغيير أنماط الطباعة ولون خلفية البطاقات:

 /* BASIC RESET */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
 }

 /* TYPOGRAPHY */

 body {
 font-family: 'Quattrocento', serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 a {
 font-family: 'Oswald', sans-serif;
 }

 /* BACKGROUND */

 .service-card {
 background-color: #0a1128;
 color: white;
 }

 .service-card a {
 color: white;
 }

فتح في المنبثقة

 /* BASIC RESET */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
 }

 /* TYPOGRAPHY */

 body {
 font-family: 'Quattrocento', serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 a {
 font-family: 'Oswald', sans-serif;
 }

 /* BACKGROUND */

 .service-card {
 background-color: #0a1128;
 color: white;
 }

 .service-card a {
 color: white;
 }

191125 انتقالات css 002

الخطوة رقم 4. - أنماط التخطيط

لنستخدم CSS Grid لإنشاء البطاقات وترتيبها أفقيًا.

قم بتحرير كود CSS:

 /* LAYOUT */

 .experts {
 margin-top: 36px;
 }

 .experts h2 {
 text-align: center;
 }

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 }

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

191125 انتقالات css 003

الخطوة رقم 5. - شبح الصورة

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

191125 انتقالات css 004

يبلغ عرض الصورة 240 بكسل وطولها 480 بكسل. يغطي كل رمز مساحة 120 × 120 بكسل. لتعيين كل صورة من الصور ، نبدأ في الزاوية اليسرى العلوية من الصورة بالإحداثيات (0 بكسل 0 بكسل) - باتباع الترتيب "يسار - أعلى".

بهذه الطريقة ، توجد الصور الموجودة في العمود الأيسر من الكائن في:

0 بكسل 0 بكسل
0 بكسل -120 بكسل
0 بكسل -240 بكسل
0 بكسل -360 بكسل

هذه هي الصور التي سيتم استخدامها قبل التمرير.

الصور الموجودة في العمود الأيمن من الكائن موجودة في:

120 بكسل 0 بكسل
120 بكسل -120 بكسل
120 بكسل -240 بكسل
120 بكسل -360 بكسل

قم بتحرير كود CSS:

 .service-card span {
 display: inline-block; /* to be able to apply width and height to the element */
 }

 .icon-strategy {
 background: url(./sprite.png) 0px 0;
 width: 120px;
 height: 120px;
 }

 .icon-ui-ux-design {
 background: url(./sprite.png) 0px -120px;
 width: 120px;
 height: 120px;
 }

 .icon-development {
 background: url(./sprite.png) 0px -240px;
 width: 120px;
 height: 120px;
 }
 .icon-digital-marketing {
   background: url(./sprite.png) 0px -360px;
   width: 120px;
   height: 120px;
 }

فتح في المنبثقة

 /* LAYOUT */

 .experts {
 margin-top: 36px;
 }

 .experts h2 {
 text-align: center;
 }

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 }

191125 انتقالات css 003

الخطوة رقم 5. - شبح الصورة

191125 انتقالات css 004

بهذه الطريقة ، توجد الصور الموجودة في العمود الأيسر من الكائن في:

0 بكسل 0 بكسل
0 بكسل -120 بكسل
0 بكسل -240 بكسل
0 بكسل -360 بكسل

هذه هي الصور التي سيتم استخدامها قبل التمرير.

الصور الموجودة في العمود الأيمن من الكائن موجودة في:

120 بكسل 0 بكسل
120 بكسل -120 بكسل
120 بكسل -240 بكسل
120 بكسل -360 بكسل

قم بتحرير كود CSS:

 .service-card span {
 display: inline-block; /* to be able to apply width and height to the element */
 }

 .icon-strategy {
 background: url(./sprite.png) 0px 0;
 width: 120px;
 height: 120px;
 }

 .icon-ui-ux-design {
 background: url(./sprite.png) 0px -120px;
 width: 120px;
 height: 120px;
 }

 .icon-development {
 background: url(./sprite.png) 0px -240px;
 width: 120px;
 height: 120px;
 }
 .icon-digital-marketing {
   background: url(./sprite.png) 0px -360px;
   width: 120px;
   height: 120px;
 }

191125 انتقالات css 005

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

قم بتحرير كود CSS:

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 padding: 0.9em 0 1.8em 0;
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 padding: 0 2.75em;
 }

فتح في المنبثقة

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 padding: 0.9em 0 1.8em 0;
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 padding: 0 2.75em;
 }

191125 انتقالات css 006

الخطوة رقم 6. - انتقالات CSS

تحتوي خاصية CSS الانتقالية على 4 خصائص فرعية مختلفة:

نقل الملكية (خاصية العنصر الذي سيتم تطبيق الانتقال عليه)
مدة الانتقال
وظيفة توقيت الانتقال
تأخير الانتقال

الاختصار هو:

الانتقال: [خاصية الانتقال] [مدة الانتقال] [وظيفة توقيت الانتقال] [تأخير الانتقال]

قم بتحرير كود CSS:

 /* TRANSITIONS */

 .service-card {
 transition: margin-top 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
 }

 .service-card:hover {
 margin-top: -5em;
 height: 25em;
 background: #006e9c;
 }

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

لجعل البطاقة تتدحرج لأعلى ، تقوم بتعيين هامش سلبي في الجزء العلوي وإضافة القيمة المطلقة لهذا الهامش إلى ارتفاع العنصر (320 بكسل == 20em).

191125 انتقالات css 008

حان الوقت الآن لاستهداف الصور وجعلها تتغير بمرحلة انتقالية.

قم بتحرير كود CSS:

 .icon-strategy,
 .icon-ui-ux-design,
 .icon-development,
 .icon-digital-marketing {
   transition: background 0.4s step-end;
 }

 .service-card:hover .icon-strategy {
   background: url(./sprite.png) 120px 0;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-ui-ux-design {
   background: url(./sprite.png) 120px -120px;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-development {
   background: url(./sprite.png) 120px -240px;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-digital-marketing {
   background: url(./sprite.png) 120px -360px;
   width: 120px;
   height: 120px;
 }

مرة اخري:

انتقال الملكية: الخلفية
مدة الانتقال: 0.4 ثانية
وظيفة توقيت الانتقال: خطوة نهاية

الباقي هو مجرد تعيين للإحداثيات الدقيقة (المفصلة أعلاه) على كائن الصورة.

191125 انتقالات css 009

أخيرًا ، دعنا نستهدف الحاوية المخفية.

قم بتحرير كود CSS:

 .hidden,
 .hidden a {
 transition: color 0.4s ease-out 0.2s;
 }

 .service-card:hover .hidden {
 height: auto;
 }
 .service-card:hover .hidden,
 .service-card:hover .hidden a {
 color: white;
 }

هناك نوعان من التفاصيل هنا يجب الانتباه إليها:

الانتقال إلى لون النص له تأخير انتقال قدره 0.2 ثانية
تتغير خاصية ارتفاع العنصر عند التمرير بدون انتقال

الانتقالات مدعومة من قبل جميع المتصفحات الرئيسية.

191125 انتقالات css 011

أتمنى أن تكون قد أحببت هذا التمرين. شكرا للقراءة!

يمكن العثور على الرمز هنا.