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

جربها بنفسك

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;
}

جربها بنفسك

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

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

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات chevron_left CSS Animations chevron_left CSS