مقدمة

سأخبرك اليوم بكيفية صنع الرسوم المتحركة. سنرى جميع خصائص الرسوم المتحركة الضرورية في هذا المنشور. يمكنك الحصول على الكود على جيثب الخاص بي. اذا هيا بنا نبدأ!!

الرسوم المتحركة

الرسوم المتحركة هي خاصية تستخدم لتحسين مظهر الموقع. إنه يوفر تدخلاً لطيفًا للمستخدم ويستخدم أيضًا لإظهار هدف موقع الويب للأشخاص.

الرسوم المتحركة الأساسية

الرسوم المتحركة الأولى: تغيير لون المربع

Square

هنا أصنع مربعًا باللون الأزرق ثم أعطيه بعض الأنماط. يمكنك أن تأخذ أي لون!

#square{
    position: relative;
    width: 8rem;
    height: 8rem;
    background-color: rgb(14, 202, 202);
    border-radius: 5px;
    margin: 3rem 0 0 3rem;
    text-align: center;
}

الآن سنقوم بعمل رسوم متحركة.

الخطوة 1: إنشاء رسوم متحركة @keyframes

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

@keyframes color{
    from{
        background-color: rgb(14, 202, 202);
    }
    to{
        background-color: pink;
    }
}

إذا كنت تريد تنفيذ رسم متحرك يتكون من خطوتين، يمكنك استخدامهما من وإلى. أو يمكنك القيام بذلك باستخدام قيمة النسبة المئوية مثل

@keyframes color{
    0%{
        background-color: rgb(14, 202, 202);
    }
    100%{
        background-color: pink;
    }
}

يتم استخدام قيم النسبة المئوية عندما يتعين عليك القيام بمهام متعددة في الرسوم المتحركة ولكن يمكنك استخدام كليهما! عادةً ما أستخدم قيمة النسبة المئوية للرسوم المتحركة

الخطوة 2: تعيين خاصية الرسوم المتحركة على المربع.

الآن، سنقوم بالرسوم المتحركة على الساحة. عليك أن تعرف عن خصائص الرسوم المتحركة لذلك. سأخبرك بتلك التي تستخدم في الغالب:

• animation-name - يتم استخدامه لإخبار المتصفح بالإطارات الرئيسية التي تريد استخدامها. في حالتي، اسم @keyframes الخاص بي هو اللون.

• مدة الرسوم المتحركة - يتم استخدامها لمعرفة مقدار الوقت الذي يجب أن تنتهي فيه الرسوم المتحركة.

• animation-iteration-count - يتم استخدامه لمعرفة عدد الوقت الذي يجب تنفيذه.

يمكنك معرفة المزيد حول الرسوم المتحركة على w3school أو على أي موقع ويب آخر. الآن، سوف نستخدم خاصية الرسوم المتحركة لكننا سنكتبها في سطر واحد مثل هذا:

    animation: color 4s infinite;

يوجد 7 خصائص في الرسوم المتحركة في Css. لاستخدام خاصية الرسوم المتحركة في سطر واحد، أكتب أولاً اسم الرسوم المتحركة وهو اللون، ثم مدة الرسوم المتحركة وهي 4 ثوانٍ في حالتي، ثم أقوم بتعيين عدد تكرار الرسوم المتحركة على عدد لا نهائي. إذا كنت تريد استخدام الرسوم المتحركة مرة واحدة فقط، فيمكنك ضبطها على 1 . يمكنك أيضًا تعيين قيم خاصية الرسوم المتحركة بنفسك.

الآن، إذا رأيت المربع الخاص بك، فسوف يتغير لونه مرارًا وتكرارًا! الآن، سوف نجعل المربع يتحرك مع تغيير اللون.

الرسوم المتحركة الثانية: تحريك المربع مع تغيير اللون!

لذلك سأستخدم نفس المربع وسأقوم بإنشاء @keyframes آخر لذلك. سوف نستخدم نفس الخطوات السابقة

الخطوة 1: إنشاء رسوم متحركة @keyframes

@keyframes move{
    0%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }50%{
        left: 300px;
        background-color: pink;
    }100%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }
}

هنا، أقوم بإنشاء @keyframes مع نقل الاسم واستخدم ثلاث خطوات لهذه الرسوم المتحركة. أولاً قمت بتعيين اليسار إلى 0px ولون الخلفية. ثم عند 50% قمت بتعيين اليسار إلى 300 بكسل وقمت بتغيير لون الخلفية وأخيرًا، قمت مرة أخرى بتعيين اليسار إلى 0 بكسل، بحيث يأتي في الموضع الأول.

الخطوة 2: تعيين خاصية الرسوم المتحركة على المربع

    animation: move 4s infinite;

هنا، قمت بتعيين اسم الرسوم المتحركة للتحرك، ثم مدة الرسوم المتحركة إلى 4 ثوانٍ وعدد تكرار الرسوم المتحركة إلى ما لا نهاية. مرة أخرى، يمكنك ضبط قيمة الرسوم المتحركة وفقًا لاختيارك. ولا تنس أيضًا التعليق على خاصية الرسوم المتحركة الأولى وإلا قد تسوء الأمور!

خاتمة

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