animation

خاصية CSS Animation تسمح لمطوري الويب بإنشاء حركات ديناميكية لعناصر الواجهة باستخدام CSS. تستخدم هذه الخاصية مفهوم الإطارات الرئيسية (Keyframes) لتحديد التغييرات في الخصائص الواجهة، مثل اللون والحجم والموضع والشفافية وغيرها، عبر فترة زمنية محددة.

يمكن تحديد عدة خصائص في خاصية CSS Animation، بما في ذلك:

1. animation-name: تحدد اسم الحركة التي تريد تطبيقها.
2. animation-duration: تحدد مدة الحركة بالثواني أو الأجزاء العشرية من الثانية.
3. animation-timing-function: تحدد الطريقة التي يتم فيها تشغيل الحركة، مثل الانتقال السلس أو الانتقال التدريجي أو التأخير.
4. animation-delay: تحدد تأخير بدء الحركة.
5. animation-iteration-count: تحدد عدد مرات تكرار الحركة.
6. animation-direction: تحدد اتجاه حركة العنصر، مثل الانتقال من اليمين إلى اليسار أو العكس.
7. animation-fill-mode: تحدد ماذا يحدث قبل وبعد تشغيل الحركة، مثل تطبيق الحركة على العنصر قبل بدء التشغيل.
8. animation-play-state: تحدد ما إذا كانت الحركة تعمل أو متوقفة.

دعنا نلقي نظرة على مثال بسيط لاستخدام خاصية CSS Animation، مع تلوين الكود:

HTML:

<div class="square"></div>

CSS:

.square {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes example {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  50% {
    background-color: green;
    left: 200px;
    top: 0px;
  }
  100% {
    background-color: blue;
    left: 200px;
    top: 200px;
  }
}

في هذا المثال، قمنا بإنشاء مربع أحمر بعرض وارتفاع 100 بكسل، وتم تحديد موقعه باستخدام الخاصية position: relative. ثم، قمنا باستخدام خاصية CSS Animation لتحديد الحركة التي نريد تطبيقها باستخدام اسم الحركة “example” ومدة الحركة 2 ثانية وتوقيت الحركة “ease-in-out” وعدد مرات تكرار الحركة “infinite”.

ثم، قمنا بتعريف الإطارات الرئيسية (Keyframes) باستخدام “@keyframes” وأسمينا هذا الإطار “example”. في هذا الإطار، قمنا بتحديد اللون والموقع الذي يجب تحريكه في كل مرحلة من الحركة. في هذا المثال، يتم تحريك العنصر من اليسار إلى اليمين ومن الأعلى إلى الأسفل، ويتم تغيير لون الخلفية في كل مرحلة.

يمكن إضافة تعليقات التوضيحية في الكود باستخدام الرموز /* هذا تعليق */، كما يلي:

/* تحديد خصائص العنصر */
.square {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  /* تحديد خصائص الحركة */
  animation-name: example;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* تحديد الإطارات الرئيسية للحركة */
@keyframes example {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  50% {
    background-color: green;
    left: 200px;
    top: 0px;
  }
  100% {
    background-color: blue;
    left: 200px;
    top: 200px;
  }
}

هذا هو مثال بسيط على كيفية استخدام خاصية CSS Animation

شرح خاصية animation-name

خاصية animation-name هي إحدى خواص CSS التي تستخدم لتعيين اسم الرسم المتحرك الذي سيتم استخدامه في عنصر HTML. وظيفتها هي تحديد اسم الرسم المتحرك الذي سيتم تشغيله باستخدام خاصية @keyframes.

يتم تعريف الخاصية باستخدام اسم الرسم المتحرك، ويتم تعريف الرسم المتحرك باستخدام خاصية @keyframes. ويمكن تعيين الخاصية لعنصر HTML باستخدام القواعد التحكم في CSS.

على سبيل المثال، يمكن تعيين خاصية animation-name لعنصر HTML مع الرمز التالي:

div {
  animation-name: myanimation;
}

في هذا المثال، تم تعيين اسم myanimation كاسم لرسم متحرك، ويمكن تعريف الرسم المتحرك باستخدام الخاصية @keyframes myanimation في CSS.

شرح خاصية animation-duration

خاصية animation-duration هي إحدى خواص CSS التي تستخدم لتحديد مدة تشغيل الرسم المتحرك. وظيفتها هي تحديد فترة زمنية محددة لتشغيل الرسم المتحرك.

تتم تعيين قيمة المدة باستخدام وحدات الزمن مثل الثواني (s) أو الجزء الألفي من الثانية (ms). وبشكل افتراضي، تكون قيمة هذه الخاصية 0 ، مما يعني عدم تشغيل الرسم المتحرك.

يمكن تعيين الخاصية لعنصر HTML باستخدام القواعد التحكم في CSS. على سبيل المثال، يمكن تعيين خاصية animation-duration لعنصر HTML مع الرمز التالي:

div {
  animation-duration: 2s;
}

في هذا المثال، تم تعيين مدة الرسم المتحرك لـ 2 ثانية باستخدام وحدة الزمن “s”. بمجرد تشغيل الرسم المتحرك، سيستمر في العمل لمدة 2 ثانية، ثم يتوقف.

جرب بنفسك كيفية عملها

شرح خاصية animation-delay

خاصية animation-delay هي إحدى خواص CSS التي تستخدم لتحديد فترة زمنية محددة لتأخير بدء تشغيل الرسم المتحرك. وظيفتها هي تأخير تشغيل الرسم المتحرك لبعض الوقت بعد تحميل الصفحة.

تتم تعيين قيمة التأخير باستخدام وحدات الزمن مثل الثواني (s) أو الجزء الألفي من الثانية (ms). وبشكل افتراضي، تكون قيمة هذه الخاصية 0 ، مما يعني بدء تشغيل الرسم المتحرك على الفور.

يمكن تعيين الخاصية لعنصر HTML باستخدام القواعد التحكم في CSS. على سبيل المثال، يمكن تعيين خاصية animation-delay لعنصر HTML مع الرمز التالي:

div {
  animation-delay: 1s;
}

في هذا المثال، تم تعيين فترة التأخير للرسم المتحرك لمدة 1 ثانية باستخدام وحدة الزمن “s”. بمجرد تحميل الصفحة، سيتم تأخير بدء تشغيل الرسم المتحرك لمدة 1 ثانية، ثم يبدأ تشغيل الرسم المتحرك.

شرح خاصية animation-iteration-count

خاصية animation-iteration-count في CSS تستخدم لتحديد عدد مرات تكرار تشغيل الرسم المتحرك. وظيفتها هي تحديد عدد المرات التي يتم فيها تكرار تشغيل الرسم المتحرك قبل التوقف.

تتوفر القيم التالية لخاصية animation-iteration-count:

1. infinite: يتم تشغيل الرسم المتحرك بشكل مستمر دون توقف.
2. <number>: يتم تحديد عدد المرات التي يتم فيها تكرار تشغيل الرسم المتحرك.

يمكن تعيين الخاصية لعنصر HTML باستخدام القواعد التحكم في CSS. على سبيل المثال، يمكن تعيين خاصية animation-iteration-count لعنصر HTML مع الرمز التالي:

div {
  animation-iteration-count: 2;
}

في هذا المثال، تم تعيين قيمة 2 كعدد مرات تكرار تشغيل الرسم المتحرك. وهذا يعني أن الرسم المتحرك سيتم تشغيله مرتين فقط قبل التوقف. يمكن استخدام القيمة infinite لتشغيل الرسم المتحرك بشكل مستمر دون توقف.

جرب بنفسك كيفية عملها

شرح خاصية animation-direction

خاصية animation-direction هي إحدى خواص CSS التي تستخدم لتحديد اتجاه تشغيل الرسم المتحرك. وظيفتها هي تحديد اتجاه تشغيل الرسم المتحرك في كل دورة تكرار.

يمكن تعيين القيمة “normal” لتشغيل الرسم المتحرك بشكل عادي في اتجاه الأمام، ويمكن تعيين القيمة “reverse” لتشغيل الرسم المتحرك بشكل عكسي في اتجاه الخلف، ويمكن تعيين القيمة “alternate” لتشغيل الرسم المتحرك بشكل متناوب بين الاتجاهين الأمامي والعكسي، ويمكن تعيين القيمة “alternate-reverse” لتشغيل الرسم المتحرك بشكل متناوب بين الاتجاهين العكسي والأمامي.

يمكن تعيين الخاصية لعنصر HTML باستخدام القواعد التحكم في CSS. على سبيل المثال، يمكن تعيين خاصية animation-direction لعنصر HTML مع الرمز التالي:

div {
  animation-direction: reverse;
}

في هذا المثال، تم تعيين اتجاه تشغيل الرسم المتحرك بشكل عكسي في اتجاه الخلف. بمجرد تشغيل الرسم المتحرك، سيتم تشغيله في اتجاه الخلف بدلاً من الاتجاه الأمامي. يمكن تغيير القيمة لأي من الخيارات الأخرى المتاحة حسب الحاجة.

جرب بنفسك كيفية عملها

شرح خاصية animation-timing-function

خاصية animation-timing-function في CSS تستخدم لتحديد نمط التغير في سرعة تشغيل الرسم المتحرك. هذه الخاصية تعمل على تغيير السرعة التي يتم بها تشغيل الرسم المتحرك على مدار فترة التشغيل.

تأخذ الخاصية قيمة واحدة على الأقل، ويمكن استخدام القيم المتاحة التالية:

1. ease: هي القيمة الافتراضية، وتعني بطء الحركة في بداية ونهاية الحركة، وتسرع الحركة في المنتصف.
2. linear: يتحرك الرسم المتحرك بنفس السرعة طوال فترة التشغيل.
3. ease-in: يتم تسريع الحركة مع مرور الوقت، ويتبطأ الحركة في نهاية فترة التشغيل.
4. ease-out: يتم تبطئ الحركة مع مرور الوقت، ويتسرع الحركة في نهاية فترة التشغيل.
5. ease-in-out: يتم تسريع الحركة في بداية فترة التشغيل، ويتبطأ الحركة في نهاية فترة التشغيل، ويتسرع الحركة في المنتصف.
6. cubic-bezier(n,n,n,n): يمكن استخدام هذه القيمة لتحديد معاملات مخصصة لتغيير السرعة. يتم تحديد هذه القيم باستخدام أربعة أرقام بين 0 و 1.

بمجرد تحديد القيمة المناسبة لخاصية animation-timing-function، يمكن تعيينها لعنصر HTML المطلوب باستخدام القواعد التحكم في CSS. على سبيل المثال:

div {
  animation-timing-function: ease;
}

في هذا المثال، تم تعيين قيمة ease كنمط تغير سرعة الرسم المتحرك. يمكن استخدام أي من القيم المتاحة الأخرى لتعيين نمط تغير سرعة مختلف حسب الحاجة.

جرب بنفسك كيفية عملها

شرح خاصية animation-fill-mode

خاصية animation-fill-mode هي إحدى خواص CSS التي تستخدم لتحديد كيفية تطبيق الخصائص المحددة في الرسم المتحرك عندما يتم تشغيله. وظيفتها هي تحديد ما إذا كانت الخصائص المحددة ستبقى مطبقة بعد انتهاء الرسم المتحرك.

تتوفر الخيارات التالية لخاصية animation-fill-mode:

1. none: لا يتم تطبيق أي تغييرات في الخصائص بعد انتهاء الرسم المتحرك.
2. forwards: يتم تطبيق الخصائص النهائية في الرسم المتحرك بعد انتهاءه، ويظل التطبيق عليها حتى يتم تغيير الخصائص بواسطة CSS أو JavaScript.
3. backwards: يتم تطبيق الخصائص الأولية في الرسم المتحرك قبل بدء تشغيل الرسم المتحرك.
4. both: يتم تطبيق الخصائص الأولية قبل بدء تشغيل الرسم المتحرك، وتتبعها الخصائص النهائية بعد انتهاء الرسم المتحرك.

يمكن تعيين الخاصية لعنصر HTML باستخدام القواعد التحكم في CSS. على سبيل المثال، يمكن تعيين خاصية animation-fill-mode لعنصر HTML مع الرمز التالي:

div {
  animation-fill-mode: forwards;
}

في هذا المثال، تم تعيين خاصية animation-fill-mode للعنصر div بقيمة forwards، والتي تعني أنه يجب تطبيق الخصائص النهائية في الرسم المتحرك بعد انتهائه. وهذا يعني أن العنصر div سيحافظ على الخصائص النهائية في الرسم المتحرك بعد انتهائه. يمكن استخدام القيم الأخرى المتاحة حسب الحاجة.

شرح animation

خاصية animation هي إحدى خواص CSS المختصرة التي تسمح بتحديد الخصائص المتعلقة بالرسم المتحرك في خط واحد بدلاً من الاستناد إلى خواص فردية مثل animation-name و animation-duration و animation-timing-function و animation-delay و animation-iteration-count و animation-direction و animation-fill-mode و animation-play-state.

تتبع عامة الخواص المتوفرة لخاصية animation التالية:

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;

وتوضح كل خاصية ما يلي:

1. animation-name: يحدد اسم الرسم المتحرك الذي سيتم استخدامه.
2. animation-duration: يحدد مدة تشغيل الرسم المتحرك.
3. animation-timing-function: يحدد نمط تغير سرعة الرسم المتحرك.
4. animation-delay: يحدد فترة التوقف قبل بدء تشغيل الرسم المتحرك.
5. animation-iteration-count: يحدد عدد مرات تكرار تشغيل الرسم المتحرك.
6. animation-direction: يحدد اتجاه تشغيل الرسم المتحرك.
7. animation-fill-mode: يحدد كيفية تطبيق الخصائص المحددة في الرسم المتحرك عندما يتم تشغيله.
8. animation-play-state: يحدد حالة تشغيل الرسم المتحرك.

يمكن تعيين الخاصية لعنصر HTML باستخدام القواعد التحكم في CSS. على سبيل المثال، يمكن تعيين خاصية animation لعنصر HTML مع الرمز التالي:

div {
  animation: example 2s linear 1s infinite alternate;
}

في هذا المثال، تم استخدام خاصية animation لتطبيق الرسم المتحرك example للعنصر div. وتم تحديد مدة تشغيل الرسم المتحرك بقيمة 2 ثانية ونمط تغير سرعته بقيمة linear، وتم تحديد فترة التوقف قبل بدء تشغيل الرسم المتحرك بقيمة 1 ثانية، وعدد مرات تكرار تشغيل الرسم المتحرك بقيمة infinite وتم تحديد اتجاه تشغيل الرسم المتحرك بقيمة alternate. يمكن استخدام الخصائص الفردية بدلاً من استخدام الخاصية المختصرة، ولكن استخدام الخاصية المختصرة يجعل الكود أكثر قراءة وسهل الفهم.

اختبار css animation

اضغط على start التي في منتصف الاختبار لبدء الاختبار