CSS Animations
المؤثرات الحركية في لغة CSS
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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
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
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
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
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
