الانميشين في CSS

Mohanad Alrwaihy

October 19, 2021

46

1

الأنميشين في CSS يسمح لنا بتغيير ما نريد من خصائص بعدد المرات الذي نريده من شكل إلى أخر

4 دقائق للقراءة

CSS

ما هي لغة CSS؟


الCSS هي لغة برمجة قوية لوصف كيف يتم عرض مستند مكتوب بلغات مثل HTML على الشاشة. (CSS) هو أداة رهيبة لإضافة نمط وتصميم معين إلى مواقع الويب وأحد أهم الأستعمالات لCSS هوا في الأنميشين.

ما هوا الأنميشين في CSS؟

الCSS أنميشين يسمح لنا بتغيير خصائص كما نريد لأكثر من مرة من شكل إلى أخر.

يمكننا صناعة أنميشين لعناصر الHTML بدون استخدام JavaScript او Flash.

هذي قائمة بخصائص الأنميشين في CSS:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

طريقة عمل CSS أنميشين:

ال @keyframe سوف يجعل من عمل الأنميشين سهل عن طريق حفظ تواقيت وشكل التصميم للعنصر وكيف سيتغير من شكل لأخر.

ال @keyframe سيكون لها اسم محدد سوف نسخدمه في العنصر المراد عمل أنميشين له بأستخدام animation-name.

يمكننا التعريف بحالتين الحالة البدائية والحالة النهائية بأستخدام from و to أو بأستخدام نسب مئوية من 0% الى 100%.

مثال عن كيفية أستخدام الأنميشين لتحريك صندوق من اليسار لليمين وتغيير اللون من الأزرق الى الأحمر في خلال 5 ثواني.

المثال الأولى:

CSS
.box-animation {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 5% 0; 

  animation-name: example1;
  animation-duration: 5s;
}
@keyframes example1 {
  from {
    background-color: blue;
    margin: 5% 0;
  }
  to {
   background-color: red;
   margin: 5% 100%;
  }
}
  • animation-name: يحدد الأنميشين المراد تحقيقة لهذا العنصر
  • animation-duration: يحدد مدة اللتي يستغرقها الأنميشين من البداية للنهاية

اطلع على المثال الأول

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

لتغيير هذا السلوك يمكننا أستخدام animation-iteration-count لتحديد كم مرة سوف يعمل الأنميشين.

مثال لكيفية جعل صندوق يتحرك متأخرا بمدة ثانيتين بأستخدام animation-delay و جعله يتكرر 5 مرات متتالية.

المثال الثاني:

CSS
.box-animation {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 5% 0; 

  animation-name: example2;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: 5;
}
@keyframes example2 {
  from {
    background-color: blue;
    margin: 5% 0;
  }
  to {
   background-color: red;
   margin: 5% 100%;
  }
}
  • animation-delay: تأخير عمل الأنميشين لعدد معين من الثواني
  • animation-iteration-count: تحديد كم مرة يتم فيها عمل الأنميشين

اطلع على المثال الثاني

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

مثال لكيفية أستعمال animation-direction لتحريك الصندوق من اليسار لليمين أو العكس أو التبديل في الأتجاهات كل مرة.

المثال الثالث:

CSS
.box-animation1 , .box-animation2,  .box-animation3, .box-animation4{
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 5% 0; 

}

.box-animation1 {
  animation-name: example3;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: 5;
  animation-direction: normal;
}

.box-animation2 {
  animation-name: example3;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: 5;
  animation-direction: reverse;
}

.box-animation3 {
  animation-name: example3;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: 5;
  animation-direction: alternate;
}

.box-animation4 {
  animation-name: example3;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: 5;
  animation-direction: alternate-reverse;
}


@keyframes example3 {
  from {
    background-color: blue;
    margin: 5% 0;
  }
  to {
   background-color: red;
   margin: 5% 100%;
  }
}
  • animation-direction: يحدد كيفية أتجاه الأنميشين

الخيارات المتاحة ل animation-direction:

  • normal: الحالة الأساسية
  • reverse: الأنميشين سيعمل بشكل معكوس
  • alternate: الأنميشين سيعمل بالحالة الأساسية في المرة الأولى وبشكل معكوس في التي بعدها وسيستمر في التبديل
  • alternate-reverse: يعمل بنفس طريقة الخيار السابق لكن سيبدء بشكل معكوس هنا.

اطلع على المثال الثالث

الأن سوف نتعلم كيف نتحكم بسرعة الأنميشين ويمكننا عمل ذلك بأستخدام animation-timing-function وفي الأسفل هيا الخيارات المتاح أستخدامها لتحكم بسرعة الأنميشين:

  • ease: الحالة الأفتراضية ويكون في البداية بطيئ, سريع, ويعود بطيئ
  • linear: ستكون سرعة الأنميشين هنا ثابتة من البداية للنهاية
  • ease-in: بداية بطيئة
  • ease-out: نهاية بطيئة
  • ease-in-out: بداية بطيئة ونهاية بطيئة
  • cubic-bezier(n,n,n,n): تحديد السرعة بأستخدام دالة بيزير
في هذا المثال سنستخدم عدة خيارات لمعرفة الفرق في السرعة بينهم.

المثال الرابع:

CSS
.box-animation1 , .box-animation2,  .box-animation3, .box-animation4{
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 5% 0; 

}

.box-animation1 {
  animation-name: example4;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: 5;
  animation-timing-function: ease;
}

.box-animation2 {
  animation-name: example4;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: 5;
  animation-timing-function: linear;

}

.box-animation3 {
  animation-name: example4;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: 5;
  animation-timing-function: ease-in;

}

.box-animation4 {
  animation-name: example4;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: 5;
  animation-timing-function: ease-out;

}

@keyframes example4 {
  from {
    background-color: blue;
    margin: 5% 0;
  }
  to {
   background-color: red;
   margin: 5% 100%;
  }
}
  • animation-timing-function: تحديد سرعة الأنميشين

اطلع على المثال الرابع

اخر خاصية موجودة لدينا هيا ال animation-fill-mode والتي تحدد شكل العنصر عندما ينتهي عمل الأنميشين.

في المثال القادم سنستخدم animation-fill-mode ونستخدم قيم مختلفة لنرى كيف يظهر العنصر بعد إنتهاء الأنميشين.

المثال الخامس:

CSS
.box-animation1 , .box-animation2,  .box-animation3, .box-animation4{
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 5% 0; 

}

.box-animation1 {
  animation-name: example5;
  animation-duration: 5s;
  animation-delay: 2s;
  
  animation-fill-mode: none;
}

.box-animation2 {
  animation-name: example5;
  animation-duration: 5s;
  animation-delay: 2s;
  
  animation-fill-mode: forwards;

}

.box-animation3 {
  animation-name: example5;
  animation-duration: 5s;
  animation-delay: 2s;
 
  animation-fill-mode: backwards;
}

.box-animation4 {
  animation-name: example5;
  animation-duration: 5s;
  animation-delay: 2s;
  
  animation-fill-mode: both;
}

@keyframes example5 {
  from {
    background-color: blue;
    margin: 5% 0;
  }
  to {
   background-color: red;
   margin: 5% 90%;
  }
}

الخيارات المتاحة عند استعمال animation-fill-mode:

  • none: الأنميشين لن يغير شكل العنصر قبل أو بعد عمله
  • forwards: سوف يحافظ العنصر على شكله بعد إنتهاء الأنميشين
  • backwards: سوف يعود العنصر لحالته الأولى بعد إنتهاء الأنميشين
  • both: سوف يتبع العنصر قواعد كلتا الحالتين السابقة لتحديد شكل العنصر.

اطلع على المثال الخامس

المصادر :