CSS: انتقال وفلتر CSS

آخر تحديث: 2026-10-13

خصائص هذا القسم: transition-property color transform transition opacity width height top left

1. انتقال CSS

الانتقال هو أبسط طريقة لتحريك CSS — حدد أي خصائص تتغير بسلاسة، وكم من الوقت، وأي توقيت.

(1) خصائص الانتقال

الخاصية	القيم	الغرض
`transition-property`	`all`، `color`، `transform`	أي خصائص تتحرك
`transition-duration`	`0.3s`، `500ms`	مدة الانتقال
`transition-timing-function`	`ease`، `linear`، `ease-in`، `ease-out`	منحنى السرعة
`transition-delay`	`0s`، `0.2s`	تأخير قبل البدء
`transition`	`all 0.3s ease`	اختصار

▶ مثال

▶ جرّب الكود

2. فلتر CSS

الفلاتر تطبق تأثيرات بصرية على العناصر:

(1) دوال الفلتر

الدالة	القيم	التأثير
`blur()`	`5px`، `10px`	ضباب غاوسي
`brightness()`	`0.5`، `1.5`	أكثر قتامة/إضاءة
`contrast()`	`0.5`، `2`	أقل/أكثر تبايناً
`grayscale()`	`0%`، `100%`	كمية التدرج الرمادي
`hue-rotate()`	`90deg`، `180deg`	تدوير اللون
`invert()`	`0%`، `100%`	عكس الألوان
`opacity()`	`0.5`، `1`	شفافية
`saturate()`	`0.5`، `2`	أقل/أكثر تشبعاً
`sepia()`	`0%`، `100%`	لون سيبيا

▶ مثال

▶ جرّب الكود

3. دمج الانتقال + الفلتر

▶ مثال

▶ جرّب الكود

خصائص هذا القسم: transition-property color transform transition opacity width height top left

❓ أسئلة شائعة

س ما الفرق بين الانتقال والرسوم المتحركة؟

ج الانتقال يحتاج مُشغّل (مثل hover) ويذهب فقط من الحالة A إلى الحالة B — بدون حلقات. الرسوم المتحركة لا تحتاج مُشغّل، يمكنها التشغيل التلقائي، تدعم إطارات رئيسية متعددة وحلقات وعكس. التفاعلات البسيطة تستخدم الانتقال؛ تأثيرات التشغيل التلقائي المعقدة تستخدم الرسوم المتحركة.

س هل جميع خصائص CSS يمكن انتقالها؟

ج لا. بعض الخصائص فقط تدعم الانتقالات. أفضل أداء مع transform وopacity — المتصفحات يمكنها تسريع GPU. لا تُحرّك width وheight وtop وleft — يسبب إعادة تدفق وتقطيعاً.

س هل filter: blur() يسبب مشاكل أداء؟

ج نعم. blur يستهلك GPU بكثافة — ضباب مساحة كبيرة يسبب انخفاض الأداء. الأفضل استخدام blur على عناصر صغيرة فقط، أو فقط في تفاعلات قصيرة مثل hover. لا تطبق blur على فيديوهات أو صور كبيرة.

📖 ملخص

الانتقال هو أبسط أشكال الرسوم المتحركة CSS — حدد أي خصائص تتحرك والمدة والتوقيت
الفلاتر توفر معالجة قوية للصور — ضباب وتدرج رمادي وتعديلات ألوان
دمج الاثنين (مثل تأثيرات الفلتر عند hover) يُنشئ تغذية راجعة تفاعلية غنية

📝 تمارين

أنشئ زراً يغيّر لون الخلفية في 0.3s عند hover، مع زيادة طفيفة في المقياس.
أنشئ معرض صور: الصور تُظهر تدرجاً رمادياً افتراضياً، تصبح ملونة بسلاسة عند hover.
أنشئ "رسم متحرك لخط سفلي للتنقل" — الخط السفلي يتمدد من الوسط عند hover.
استخدم filter + transition لجعل الصور أكثر إضاءة وضبابية طفيفة عند hover.

فريق Web-Tutorial التقني

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

من نحن