دليل تمهيدي لانتقالات CSS

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

مقدمة في انتقالات CSS

تعد انتقالات CSS هي أبسط طريقة لإنشاء رسم متحرك في CSS.

في الانتقال ، تقوم بتغيير قيمة الخاصية ، وتطلب من CSS تغييرها ببطء وفقًا لبعض المعلمات ، نحو الحالة النهائية.

يتم تعريف انتقالات CSS من خلال هذه الخصائص:

خاصية وصف
transition-property خاصية CSS التي يجب أن تنتقل
transition-duration مدة الانتقال
transition-timing-function وظيفة التوقيت المستخدمة في الرسوم المتحركة (القيم المشتركة: الخطي ، السهولة). الافتراضي: سهولة
transition-delay عدد الثواني الاختياري للانتظار قبل بدء الرسم المتحرك

الtransitionالخاصية هي اختصار مفيد:

.container {
  transition: property duration timing-function delay;
}

مثال على انتقال CSS

هذه الشفرة تنفذ انتقال CSS

.one,
.three {
  background: rgba(142, 92, 205, 0.75);
  transition: background 1s ease-in;
}

.two, .four { background: rgba(236, 252, 100, 0.75); }

.circle:hover { background: rgba(142, 92, 205, 0.25); /* lighter */ }

انظر المثال على خللhttps://glitch.com/edit/#!/flavio-css-transitions-example

عندما تحوم ملف.oneو.threeالعناصر ، الدوائر الأرجوانية ، هناك رسوم متحركة انتقالية تسهل تغيير الخلفية ، بينما لا تفعل الدوائر الصفراء ، لأنها لا تملكtransitionخاصية محددة.

قيم وظيفة توقيت الانتقال

transition-timing-functionيسمح بتحديد منحنى تسريع الانتقال.

هناك بعض القيم البسيطة التي يمكنك استخدامها:

قيمة
خطي
يسهل
سهولة في
التخفيف من
سهولة في الخروج

هذا خلليوضح كيف يعمل هؤلاء في الممارسة.

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

انتقالات CSS في Browser DevTools

المتصفح DevToolsتقدم طريقة رائعة لتصور التحولات.

هذا كروم:

Debug CSS Transitions in Chrome DevTools

هذا هو Firefox:

Debug CSS Transitions in Firefox DevTools

من هذه اللوحات ، يمكنك تحرير الانتقال والتجربة في الصفحة مباشرةً دون إعادة تحميل التعليمات البرمجية الخاصة بك.

الخصائص التي يمكنك تحريكها باستخدام انتقالات CSS

كثيرا! ولكن ليس كل خصائص CSS.

ها هي القائمة الكاملة:

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

تحميل مجانيكتيب CSS


المزيد من دروس css: