انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 132
دورة لغة CSS

المؤثرات الحركية في لغة CSSCSS Animations

سوف تتعلم في هذا الدرس المؤثرات الحركية في لغة CSS وهي السماح للغة CSS بعمل مؤثرات حركية دون الحاجه إلي لغة JavaScript.
ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
10
الأمثلة
14
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
4,835
محتوى الدرس
في هذا الدرس 10تصفّح المواضيع

CSS Animations المؤثرات الحركية في لغة CSS

CSS animations:

  • CSS animation هو تغيير العنصر من style إلي style أخر.
  • يمكن تغيير أي عدد من الخصائص لأي عنصر في أي مدة زمنية.


يتكون CSS animations من:

  • keyframes هو مجموعة خصائص لها تأثير يمكن تطبيق هذا التأثير علي عنصر محدد.
  • animation-name هي خاصية يتم تحديد بداخلها اسم keyframes لكي يتم تطبيق الخصائص الموجودة داخل keyframes علي العنصر الذي تم تحديد له خاصية animation.
  • animation-duration هي المدة الزمنية التي يقطعها animation المؤثرات الحركية.
  • animation-delay هي المدة الزمنية التي ينتظرها المتصفح قبل بدأ animation المؤثرات الحركية.

CSS animation keyframes keyframes مع animation في لغة CSS

طريقة كتابة keyframes مع animations في لغة CSS:

  • keyframes تجهيز keyframes وهو يبدأ بعلامة @ متبوعاً بكلمة keyframes ليصبح بهذا الشكل keyframes@.
  • name تحديد اسم keyframes ويكتب الاسم بعد  keyframes@ ونفصل بينهم بمسافة.
  •  curly braces نتبع keyframes@ والاسم curly braces بأقواس مجعدة.
  • values يكتب بداخل curly braces بأقواس مجعدة [from - to] أو النسبة المئوية [0% - 25% - 50%].
  • property تكتب بداخل [from - to] أو النسبة المئوية [0% - 25% - 50%] خاصية من خصائص CSS مع قيمة مختلفة من إلي ليبدا animation من from وينتهي عند to.
HTML 
@keyframes move
{
  from {margin-left: 0;}
  to {margin-left: 150px;}
}

CSS animation select name تحدي اسم animation وتطبيقه علي عنصر في لغة CSS

تستخدم خاصية animation-name في لغة CSS لنربط بين العنصر و keyframes وتكون قيمة animation-name هي اسم keyframes الذي تم إنشاؤه مسبقاً.

HTML 
div
{
  width: 100px;
  height: 100px;
  animation-name: move;
}

CSS animation duration مدة animation في لغة CSS

تستخدم خاصية animation-duration في لغة CSS لتحديد مدة animation المؤثر الحركي سوف يبدأ وينتهي في خلال هذه المدة.

HTML 
div
{
  width: 100px;
  height: 100px;
  animation-name: move;
  animation-duration: 4s;
}

Try CSS animation جرب animation في لغة CSS

في هذا المثال سوف يتحرك div من اليسار من القيمة 0 مع خاصية margin-left ألي 150px جهة اليمين.

CSS animation

تم تحديد أسم animation بداخل عنصر div في لغة CSS

جرّب بنفسك

CSS animation

تم تحديد أسم animation بداخل عنصر div في لغة CSS

HTML 
div
{
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: move;
  animation-duration: 4s;
}

@keyframes move
{
  from {margin-left: 0;}
  to {margin-left: 150px;}
}
جرّب بنفسك

CSS animation color

تغيير اللون من الأزرق إلي الأزرق السماوي عن طريق CSS animation.

جرّب بنفسك

CSS animation delay تأخير animation في لغة CSS

تستخدم خاصية animation-duration مع خاصية animation في لغة CSS لتحديد وقت يتأخر المؤثر الحركي ويبدأ animation عندما يمر هذا الوقت.

CSS animation delay

جرّب بنفسك

CSS animation delay

HTML 
div
{
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: move;
  animation-delay: 2s;
  animation-duration: 4s;
}
جرّب بنفسك

CSS animation iteration count خاصية animation iteration count في لغة CSS

تستخدم خاصية animation-iteration-count مع خاصية animation في لغة CSS لتحدي عدد مرات تكرار المؤثر الحركي.
جرّب بنفسك

CSS animation iteration count

خاصية animation iteration count في لغة CSS.

HTML 
div
{
  width: 100px;
  height: 100px;
  position: relative;
  background-color: blue;
  animation-name: move;
  animation-duration: 4s;
  animation-iteration-count:4;
}
جرّب بنفسك

CSS animation iteration count infinite

عندما يتم تحديد infinite مع خاصية animation-iteration-count يتم التكرار إلي عدد لا نهائي من المرات.

HTML 
div
{
  width: 100px;
  height: 100px;
  position: relative;
  background-color: blue;
  animation-name: move;
  animation-duration: 4s;
  animation-iteration-count:infinite;
}
جرّب بنفسك

CSS animation direction reverse خاصية animation-direction مع القيمة reverse في لغة CSS

تستخدم خاصية animation-direction مع animation في لغة CSS لتحدد اتجاه الحركة بحالته الطبيعية أو عكسي.


قيم خاصية animation-direction في لغة CSS:

  • normal  وهي قيمة animation الافتراضية animation وهي تحريكه بوضعه الطبيعي.
  • reverse وهي تعطي عكس القيمة الافتراضية أي انها تقوم بعكس اتجاه animation وتجعله عكس اتجاهه الطبيعي.
  • alternate  يتحرك animation بوضعة الطبيعي في البداية ثم يتحرك للخلف بعدها.
  • alternate-reverse يتحرك animation لاتجاهه الطبيعي في البداية ثم يتحرك عكس الاتجاه الطبيعي.

CSS animation direction reverse

تحريك العنصر عكس اتجاهه الطبيعي مع animation-direction-reverse في لغة CSS.

HTML 
div
{
  width: 100px;
  height: 100px;
  position: relative;
  background-color: blue;
  animation-name: move;
  animation-duration: 4s;
  animation-iteration-count:infinite;
  animation-direction: reverse;
}
جرّب بنفسك

CSS animation direction alternate

يتحرك animation بوضعة الطبيعي في البداية ثم يتحرك عكسي بعدها مع animation-direction والقيمة alternate.

HTML 
div
{
  width: 100px;
  height: 100px;
  position: relative;
  background-color: blue;
  animation-name: move;
  animation-duration: 4s;
  animation-iteration-count:infinite;
  animation-direction: alternate;
}
جرّب بنفسك

CSS animation direction alternate reverse

يتحرك animation لاتجاهه الطبيعي في البداية ثم يتحرك عكس الاتجاه الطبيعي مع CSS animation-direction والقيمة alternate reverse.

HTML 
div
{
  width: 100px;
  height: 100px;
  position: relative;
  background-color: blue;
  animation-name: move;
  animation-duration: 4s;
  animation-iteration-count:infinite;
  animation-direction: alternate-reverse;
}
جرّب بنفسك

CSS animation fill mode وضع العنصر بعد الحركة في لغة CSS

تستخدم خاصية animation-fill-mode مع animation في لغة CSS للتحكم في وضع العنصر بعد الحركة يقف علي style الجديد أم انه يرجع إلي الوضع القديم.


قيم خاصية animation-fill-mode في لغة CSS:

  • none : هي القيمة الافتراضية وهو أن يرجع العنصر إلي وضعة الطبيعي بعد animation.
  • forwards : يأخذ العنصر قيم وشكل animation في لحظة انتهائه.
  • backwards يأخذ العنصر قيم وشكل ال animation في لحظة بدايته.

CSS animation fill mode forwards

يأخذ العنصر قيم وشكل animation في لحظة انتهائه مع الخاصية animation-fill-mode والقيمة forwards.

HTML 
div
{
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: move;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}
جرّب بنفسك

CSS animation fill mode backwards

يأخذ العنصر قيم وشكل ال animation في لحظة بدايته مع الخاصية animation-fill-mode والقيمة backwards.

HTML 
div
{
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: move;
  animation-duration: 4s;
  animation-fill-mode: backwards;
}
جرّب بنفسك

CSS animation shorthand اختصار جمع خصائص animation في خاصية واحدة في لغة CSS

يمكن اختصار جميع خصائص animation في لغة CSS الي خاصية واحدة وهي animation تكتب جميع القيم بشكل تسلسلي في سطر واحد.

before CSS animation shorthand

قبل استخدام الاختصار CSS animation shorthand.

HTML 
div
{
  animation-name: move;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

CSS animation shorthand

يمكن تحقيق نفس تأثير الحركة على الشكل السابق باستخدام طريقة ال shorthand مع خاصية ال animation

HTML 
div
{
  width: 100px;
  height: 100px;
  position: relative;
  background-color: blue;
  animation: move 5s linear 2s infinite alternate;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات25

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 25 مفهومةأول بطاقة، أول خطوة
01 Animations الرسوم المتحركة
للمراجعة
02 JavaScript لغة برمجة موجهة للكائنات
للمراجعة
03 Name اسم
للمراجعة
04 Duration مدة زمنية
للمراجعة
05 Delay التأخير
للمراجعة
06 Count عداد
للمراجعة
07 Direction اتجاه
للمراجعة
08 Timing التوقيت
للمراجعة
09 Function الوظيفة
للمراجعة
10 Fill ملء
للمراجعة
11 Mode وضع
للمراجعة
12 Rule القاعدة
للمراجعة
13 Example مثال
للمراجعة
14 How Many Times كم عدد المرات
للمراجعة
15 Should Run يجب أن تعمل / تنفذ
للمراجعة
16 Infinite مالانهاية
للمراجعة
17 Reverse عكسي / للخلف
للمراجعة
18 Normal عادي
للمراجعة
19 Alternate بديل
للمراجعة
20 Speed السرعة
للمراجعة
21 Curve منحنى
للمراجعة
22 None لاشئ
للمراجعة
23 Forwards إلي الأمام
للمراجعة
24 Backwards إلي الخلف
للمراجعة
25 Shorthand إختصار
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات3

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 3 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة
02 HTML HTML
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
للمراجعة
03 Set Set
Setting
ضبط
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

4أسئلة 3أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي4 أسئلة تنتظرك
01

تستخدم الخاصية,.,,,,,,,,,,,,, في تحديد عدد مرات تكرار ال animation ؟

02

تستخدم الخاصية " animation-delay " في تحديد عدد مرات تكرار ال animation في تحديد مدة تنفيذ ال animation .؟

03

تحدد الخاصية ما إذا كان يجب تشغيل الرسم المتحرك للأمام أو للخلف أو في دورات متبادلة فما هي ؟

____
04

ماهي الخاصية التي تستخدم في تحديد الوقت المنقضي قبل تنفيذ ال animation ؟