CSS: الرسوم المتحركة في CSS

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

كيفية إنشاء رسوم متحركة باستخدام CSS

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

إليك مثال على كيفية إنشاء حركة بسيطة لتغيير لون العنصر:

@keyframes changeColor {
            from {
                background-color: red;
            }
            to {
                background-color: blue;
            }
        }

        .animated-box {
            width: 100px;
            height: 100px;
            background-color: red;
            animation: changeColor 2s infinite;
        }
    

    <div class=\"animated-box\"></div>

خصائص الرسوم المتحركة في CSS

تتضمن خاصية animation عدة جوانب يمكن تخصيصها لتناسب احتياجات التصميم. بعض الخصائص الأساسية تشمل:

• animation-name: يحدد اسم الرسوم المتحركة المستخدمة، والذي تم تعريفه في @keyframes.
• animation-duration: يحدد مدة الرسوم المتحركة.
• animation-timing-function: يحدد سرعة الرسوم المتحركة والتي يمكن أن تكون ثابتة أو مخصصة باستخدام وظائف مثل ease أو linear.
• animation-delay: يحدد فترة التأخير قبل بدء الرسوم المتحركة.
• animation-iteration-count: يحدد عدد مرات تكرار الرسوم المتحركة. يمكن أن يكون عددًا محددًا أو infinite.
• animation-direction: يحدد اتجاه الرسوم المتحركة، مثل normal أو reverse.

يمكن استخدام هذه الخصائص لإنشاء تأثيرات أكثر تعقيدًا وسلاسة. على سبيل المثال، يمكن استخدام خاصية animation-delay لتأخير بدء الرسوم المتحركة، بينما يمكن استخدام خاصية animation-iteration-count لتكرار الحركة لعدد محدد من المرات.

فيما يلي مثال على كيفية استخدام هذه الخصائص لإنشاء حركة متقدمة:

@keyframes moveAndRotate {
            0% {
                transform: translateX(0) rotate(0deg);
            }
            50% {
                transform: translateX(100px) rotate(180deg);
            }
            100% {
                transform: translateX(0) rotate(360deg);
            }
        }

        .advanced-animation {
            width: 50px;
            height: 50px;
            background-color: green;
            animation: moveAndRotate 3s ease-in-out infinite;
        }
    

    <div class=\"advanced-animation\"></div>

في هذا المثال، قمنا بإنشاء حركة تجعل العنصر يتحرك ويدور في نفس الوقت باستخدام @keyframes والعديد من خصائص animation.