CSS

Part 11 التحولات والتأثيرات (Transitions & Animations) في CSS – سلسلة FSWD -CSS

ahmedمنذ 4 أسابيع

0 115 3 دقائق

التحولات والتأثيرات (Transitions & Animations) في CSS

التحولات والتأثيرات في CSS هي أدوات رائعة لتحسين تجربة المستخدم على صفحات الويب. تُستخدم التحولات (Transitions) لإنشاء تأثيرات سلسة عند التفاعل مع العناصر، بينما تُستخدم الأنيميشن (Animations) لإنشاء حركات معقدة تتفاعل مع الوقت. في هذا الدرس، سنتعرف على كيفية استخدام هذه الخصائص مع أمثلة عملية.

1. التحولات (Transitions) في CSS

التحولات في CSS هي خاصية تُستخدم لتطبيق تغييرات تدريجية (smooth) على خصائص معينة عندما يحدث تغيير في حالة العنصر (مثل تمرير الفأرة عليه أو تغيير الحجم). توفر هذه التقنية تجربة تفاعلية ممتعة وسلسة للمستخدم.

1.1 تركيب التحولات

تركيب التحول الأساسي يتضمن الخصائص التالية:

transition-property: الخاصية التي سيتم تطبيق التحول عليها (مثل color, background-color, width، إلخ).
transition-duration: مدة التحول (بالثواني أو الملي ثانية).
transition-timing-function: نوع التأثير الذي يحدد تسارع التحول (مثل linear, ease, ease-in, ease-out).
transition-delay: تأخير بدء التحول (اختياري).

1.2 مثال على التحولات:

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على التحولات</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="box"></div>
</body>
</html>

CSS (styles.css)

/* تعيين المربع */
.box {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    transition: all 0.5s ease-in-out;  /* جميع التحولات تستغرق 0.5 ثانية */
}

/* عند التفاعل مع المربع */
.box:hover {
    background-color: #e74c3c;  /* تغيير اللون عند التمرير */
    transform: rotate(45deg);  /* تدوير المربع */
    width: 300px;  /* تغيير العرض */
    height: 300px;  /* تغيير الارتفاع */
}

الشرح:

عند التمرير على المربع (.box), يتم تطبيق تحول تدريجي على خصائص مختلفة مثل اللون (background-color), التدوير (transform), والحجم (width, height).
يتم تطبيق التحول باستخدام transition: all 0.5s ease-in-out; التي تعني أنه سيتم تطبيق التحول على جميع الخصائص خلال 0.5 ثانية باستخدام تأثير ease-in-out الذي يبدأ ببطء ثم يتسارع وينتهي ببطء.

2. الأنيميشن (Animations) في CSS

الأنيميشن في CSS يسمح لك بإنشاء حركات معقدة وأكثر تفصيلاً باستخدام @keyframes. هذه الأنيميشنات يمكن أن تتحرك مع مرور الوقت بشكل متكرر أو يمكن أن تتوقف عند نقطة معينة.

2.1 تركيب الأنيميشن

الأنيميشن يتم تعريفه باستخدام @keyframes والذي يحدد التغييرات التي ستحدث على العنصر خلال فترة معينة. ثم يتم تطبيق الأنيميشن على العنصر باستخدام الخصائص التالية:

animation-name: اسم الأنيميشن الذي تريد تطبيقه.
animation-duration: مدة الأنيميشن.
animation-timing-function: نوع التأثير (مثل linear, ease, ease-in, ease-out).
animation-delay: التأخير قبل بدء الأنيميشن.
animation-iteration-count: عدد مرات تكرار الأنيميشن (مثل infinite للتكرار إلى الأبد).
animation-direction: اتجاه الأنيميشن (مثل normal, reverse, alternate).

2.2 مثال على الأنيميشن باستخدام `@keyframes`:

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على الأنيميشن</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="circle"></div>
</body>
</html>

CSS (styles.css)

/* تعريف العنصر الدائري */
.circle {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    border-radius: 50%;  /* لجعل العنصر دائري */
    animation: moveCircle 2s ease-in-out infinite;  /* تطبيق الأنيميشن */
}

/* تعريف الأنيميشن باستخدام @keyframes */
@keyframes moveCircle {
    0% {
        transform: translateX(0);  /* عند البداية */
        background-color: #3498db;
    }
    50% {
        transform: translateX(200px);  /* الانتقال 200px إلى اليمين */
        background-color: #e74c3c;
    }
    100% {
        transform: translateX(0);  /* العودة إلى الوضع الأصلي */
        background-color: #3498db;
    }
}

الشرح:

يتم إنشاء دائرة باستخدام border-radius: 50%، ثم تطبيق الأنيميشن عليها باستخدام @keyframes moveCircle.
الأنيميشن يتحرك الدائرة من اليسار إلى اليمين (translateX(200px)) ثم يعود بها إلى موقعها الأصلي، مع تغيير اللون بين الأزرق والأحمر في منتصف الأنيميشن.
الأنيميشن يتم تنفيذه خلال 2 ثانية (2s)، مع تأثير ease-in-out، ويتكرر إلى ما لا نهاية باستخدام infinite.

3. مثال مع استخدام التحولات والأنيميشن معًا

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

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على التحولات والأنيميشن</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="interactive-box"></div>
</body>
</html>

CSS (styles.css)

/* تعريف المربع التفاعلي */
.interactive-box {
    width: 150px;
    height: 150px;
    background-color: #3498db;
    margin: 50px;
    transition: all 0.4s ease;  /* تأثير تحولي سلس */
    animation: bounce 1.5s infinite;  /* الأنيميشن للتحريك المتكرر */
}

/* تغيير اللون والحجم عند التفاعل */
.interactive-box:hover {
    background-color: #e74c3c;  /* تغيير اللون عند التمرير */
    transform: scale(1.2);  /* تكبير المربع */
}

/* تعريف الأنيميشن للتحريك */
@keyframes bounce {
    0% {
        transform: translateY(0);  /* البداية */
    }
    50% {
        transform: translateY(-30px);  /* التحرك للأعلى */
    }
    100% {
        transform: translateY(0);  /* العودة إلى الوضع الأصلي */
    }
}

الشرح:

transition تستخدم لجعل المربع يتغير بشكل سلس عند التفاعل، مثل تغيير اللون والتكبير باستخدام scale(1.2) عند التمرير على المربع.
@keyframes bounce تُستخدم لإضافة حركة متكررة للمربع، حيث يتحرك المربع للأعلى ثم يعود إلى موقعه الأصلي.
الأنيميشن يتكرر بشكل مستمر بفضل خاصية infinite.

نصائح لاستخدام التحولات والأنيميشن:

البساطة مهمة: استخدم التحولات والأنيميشن بشكل معتدل. الأنيميشن المفرط قد يشتت انتباه المستخدم أو يؤثر على أداء الصفحة.
استخدام التحولات مع التفاعلات: التحولات تعمل بشكل جيد في التفاعل مع الأحداث مثل التمرير بالفأرة (:hover) أو النقر (:focus).
اختبار الأداء: تأكد من أن التأثيرات تعمل بسلاسة عبر الأجهزة المختلفة. يمكن أن تؤثر الأنيميشن الثقيلة على أداء الأجهزة الأقدم.
استخدم الأوقات المناسبة: خصائص مثل animation-duration و transition-duration يجب أن تكون متوافقة مع تأثيرك العام لضمان تجربة سلسة.

خلاصة:

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