CSS

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

سوف تتعلم في هذا الدرس المؤثرات الحركية في لغة CSS وهي السماح للغة CSS بعمل مؤثرات حركية دون الحاجه إلي لغة JavaScript.

التاريخ

30 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2033

المواضيع

24
الشروحات chevron_left CSS Animations chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

</> 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.
@keyframes move
{
  from {margin-left: 0;}
  to {margin-left: 150px;}
}

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

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

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

</> CSS animation duration
مدة animation في لغة CSS

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

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

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.

هام
عندما ينتهي المؤثر الحركي الناتج عن خاصية animation يرجع العنصر إلي وضعة الطبيعي قبل التأثير في لغة CSS.

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

تستخدم خاصية animation-duration مع خاصية animation في لغة CSS لتحديد وقت يتأخر المؤثر الحركي ويبدأ animation عندما يمر هذا الوقت.
CSS animation delay
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.

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 يتم التكرار إلي عدد لا نهائي من المرات.

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.

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.

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.

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.

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.

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.

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

div
{
  width: 100px;
  height: 100px;
  position: relative;
  background-color: blue;
  animation: move 5s linear 2s infinite alternate;
}
مصطلحات الدرس
Animations
Animations

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

JavaScript
JavaScript

لغة برمجة موجهة للكائنات

Name
Name

اسم

Duration
Duration

مدة زمنية

Delay
Delay

التأخير

Count
Count

عداد

Direction
Direction

اتجاه

Timing
Timing

التوقيت

Function
Function

الوظيفة

Fill
Fill

ملء

Mode
Mode

وضع

Rule
Rule

القاعدة

Example
Example

مثال

How Many Times
How Many Times

كم عدد المرات

Should Run
Should Run

يجب أن تعمل / تنفذ

Infinite
Infinite

مالانهاية

Reverse
Reverse

عكسي / للخلف

Normal
Normal

عادي

Alternate
Alternate

بديل

Speed
Speed

السرعة

Curve
Curve

منحنى

None
None

لاشئ

Forwards
Forwards

إلي الأمام

Backwards
Backwards

إلي الخلف

Shorthand
Shorthand

إختصار

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
Set
Set

Setting

ضبط
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.