جاري التحميل...
جاري التحميل...
Transitions، Scroll-driven animations، @starting-style
الرسوم المتحركة الحديثة هي مجموعة من ميزات CSS التي تتيح لك إنشاء رسوم متحركة تفاعلية وسلسة دون الاعتماد بالكامل على JavaScript. تتضمن هذه الميزات الانتقالات، الرسوم المتحركة، الرسوم المتحركة المدفوعة بالتمرير، و @starting-style.
ببساطة، تتيح لك هذه الأدوات التحكم في كيفية انتقال العناصر من حالة إلى أخرى - سواء كان تغيير لون الزر عند التمرير، أو إنشاء تأثير دوران مستمر، أو حتى ربط الحركة بموضع التمرير في الصفحة.
تنتج كلا الرسوم المتحركة CSS والانتقالات نفس النتيجة البصرية (حركة سلسة)، لكنهما تختلفان في الطريقة والاستخدام. الفرق الرئيسي هو أن الانتقالات تتحرك بين حالتين فقط، بينما يمكن للرسوم المتحركة المرور بعدة مراحل (إطارات رئيسية).
prefers-reduced-motion، يمكنك احترام تفضيلات المستخدم للحركة المخفضةبدون الرسوم المتحركة والانتقالات، تحدث تغييرات الواجهة فجأة وبشكل مفاجئ. هذا يجعل التفاعلات تبدو قاسية وغير طبيعية.
قبل الرسوم المتحركة: يتغير لون الزر فوراً، إظهار/إخفاء العناصر مفاجئ، لا وسيلة لجذب انتباه المستخدم، يبدو محتوى الصفحة ساكناً.
بعد الرسوم المتحركة: الانتقالات بين الحالتين سلسة وطبيعية، يمكن إنشاء تأثيرات تفاعلية معقدة باستخدام CSS فقط، يمكن ربط الحركة بموضع التمرير، ويتم احترام تفضيلات المستخدم للحركة المخفضة.
كيف تعمل الانتقالات: عند تغيير خاصية CSS على عنصر مع transition، يكتشف المتصفح التغيير، ويحسب القيم الأولية والنهائية، ووظيفة التوقيت لحساب القيم في كل إطار، ويطبقها، ويصل إلى القيمة النهائية عند انتهاء المدة.
كيف تعمل الرسوم المتحركة: مشابهة لكن مع تعقيد إضافي - تقرأ جميع الإطارات الرئيسية المعرّفة، وتحسب الوقت الحالي مقارنة بالمدة الإجمالية، وتحدد بين أي مرحلتين نحن، ووظيفة التوقيت للحساب الدقيق، وتطبق القيم بناءً على عدد التكرارات.
الرسوم المتحركة المدفوعة بالتمرير: عند استخدام animation-timeline: scroll()، يربط المتصفح تقدم الرسوم المتحركة بموضع التمرير بدلاً من الوقت - عند 0% تمرير، الرسوم المتحركة عند 0%؛ عند 50% تمرير، الرسوم المتحركة عند 50%؛ عند 100% تمرير، تكتمل الرسوم المتحركة.
ما الفرق الأساسي بين Transition و Animation في CSS؟
لماذا يجب استخدام prefers-reduced-motion على مواقع الويب؟
أنشئ صفحة معرض مع: شريط تقدم في الأعلى مرتبط بالتمرير، بطاقات صور تظهر بتأثير التلاشي وتنزلق لأعلى عند التمرير، تأثيرات تمرير ترفع البطاقات مع تغييرات الظل، مؤشر تحميل يدور باستمرار، وإيقاف جميع الرسوم المتحركة عند تفعيل prefers-reduced-motion.
الحل:
/* CSS Animation Challenge */
/* 1. Create a custom easing function */
:root {
--ease-spring: linear(
0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%,
0.721 25.3%, 0.849 31.5%, 0.937 38.1%,
0.968 41.8%, 0.991 46.3%, 1.006 51.2%,
1.015 56.6%, 1.017 64.2%, 1.001 88.7%, 1
);
}
/* 2. Animate something */
.animated-element {
animation: bounce 0.6s var(--ease-spring);
}
@keyframes bounce {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}دوال التسهيل الجديدة:
/* linear() - تسهيل مخصص */
--ease-spring: linear(
0, 0.006, 0.025 2.8%,
0.539 18.9%, 0.849 31.5%,
1.006 51.2%, 0.968 55.2%
);
/* view() - مدفوع بالتمرير */
animation-timeline: view();
animation-range: entry 0% cover 100%;
/* scroll() - مدفوع بالتمرير */
animation-timeline: scroll();نطاقات الجدول الزمني:
/* نطاقات دخول/خروج محددة */
animation-range: entry 0% entry 100%;
animation-range: exit 0% exit 100%;
/* نطاقات التغطية */
animation-range: cover 0% cover 50%;
/* نطاقات مسماة */
animation-range: normal;الأداء:
أمثلة سريعة:
/* مؤشر تقدم التمرير */
.progress {
animation: grow linear;
animation-timeline: scroll();
}
/* ظهور عند التمرير */
.card {
animation: fade-in linear both;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(50px); }
to { opacity: 1; transform: translateY(0); }
}