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

• مقدمة في انتقالات CSS
• مثال على انتقال CSS
• قيم وظيفة توقيت الانتقال
• انتقالات CSS في Browser DevTools
• الخصائص التي يمكنك تحريكها باستخدام انتقالات CSS

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

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

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

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

ال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تقدم طريقة رائعة لتصور التحولات.

هذا كروم:

هذا هو Firefox:

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

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

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

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

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

• دليل Flexbox
• CSS Grid Tutorial
• متغيرات CSS (خصائص مخصصة)
• مقدمة إلى PostCSS
• خاصية هامش CSS
• كيفية توسيط عنصر باستخدام CSS
• خطوط نظام CSS
• كيفية طباعة HTML الخاص بك بأسلوب
• دليل تمهيدي لانتقالات CSS
• برنامج تعليمي للرسوم المتحركة CSS
• مقدمة في CSS
• دليل CSS
• كيفية إعداد Tailwind مع PurgeCSS و PostCSS
• ورقة الغش في Tailwind
• كيفية تدوير صورة باستخدام CSS بشكل مستمر
• جعل الجدول مستجيبًا باستخدام CSS
• كيفية تصحيح أخطاء CSS عن طريق شطر
• محددات CSS
• تتالي CSS
• خصوصية CSS
• محددات سمات CSS
• ألوان CSS
• وحدات CSS
• عنوان URL لـ CSS ()
• طباعة CSS
• نموذج صندوق CSS
• خاصية موضع CSS
• استعلامات وسائط CSS والتصميم سريع الاستجابة
• استعلامات ميزات CSS
• تحويلات CSS
• كيفية تصميم القوائم باستخدام CSS
• بادئات بائع CSS
• الوراثة CSS
• فئات CSS الزائفة
• عناصر CSS الزائفة
• تصميم جداول HTML باستخدام CSS
• خاصية عرض CSS
• وظيفة CSS calc ()
• حدود CSS
• استيراد ملف CSS باستخدامimport
• معالجة أخطاء CSS
• مرشحات CSS
• تحجيم صندوق CSS
• خلفيات CSS
• تعليقات CSS
• خطوط CSS
• حشوة CSS
• خاصية تعويم CSS والمقاصة
• تطبيع CSS
• خاصية CSS z-index
• كيفية تعطيل اختيار النص باستخدام CSS
• كيفية وضع عنصر في أسفل الحاوية الخاصة به باستخدام CSS
• كيفية قلب الألوان باستخدام CSS
• العلامات المسبقة المستجيبة في CSS
• فيديوهات يوتيوب متجاوبة
• ما هي قيم CSS Breakpoint الجيدة للتصميم المستجيب؟
• كيفية محاذاة المركز في flexbox