شرح Keyframe Animations في CSS


%d8%b4%d8%b1%d8%ad-keyframe-animations-%d9%81%d9%8a-css-2

من خلال هذا الموضوع استعرض معكم خاصية Keyframe Animations في css، في الموضوع السابق استعرضت معكم خاصية transition ببساطة ويمكنك الرجوع له حيث يحتوي علي بعض النقاط التي قد تساعدك في فهم هذا الموضوع.

شرح خاصية transition في css ببساطة

لاستخدام Keyframe Animations يجب اولا ان تحدد ماذا تريد تنفيذة ليكن ارغب في ان يستمر عنصر في الظهور لاعلي واسفل وان تستمر الحركة حتي يجذب انتباه الزائر.

في البداية ليكن هذا هو العنصر المراد تحريكة اعلي واسفل :


div {

width : 100px;

background : #eee;

font-size:1rem;

position : relative

}

يتم كتابة عنصر علي هذا الشكل :


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

ويمكن اختصارة عن طريق كتابة جميع القيم السابقة بجانب animation فقط مثل :


div {
animation: example 5s linear 2s infinite alternate;
}

حسنا لنوضح ما هذة القيم وما القيم الاخري التي يمكن كتابتها في البداية :

animation-name يتم كتابة اسم Keyframe  المستخدم وتاخذ هنا فقط اسم العنصر اي كان ليكن myAnimtion

animation-duration مدة التحريك وتاخذ مثلا 1s او 5s

animation-timing-function سرعه التحريك وهنا تاخذ القيم التالية :

  • linear
  •  ease
  • ease-in
  • ease-out
  • ease-in-out

قم بالرجوع للموضوع السابق لمعرفة الفر بينهم

  1. animation-delay مدة التي تبدا بعدها الحركة او مدة انتظار لتنفيذ الحركة ليكن 3s تعني بعد 3 ثوان ابدا في تنفيذ الحركة
  2. animation-iteration-count عدد مرات الحركة ليكن 3 تعني تنفيذ التاثير 3 مرات متتالية
  3. animation-direction نقطة بدئ الحركة من نهاية او البداية او المنتصف وهنا تاخذ :
  4. normal وهي القيمة الافتراضية حيث يبدا الحركة من نقطة 0% الي 100% وهنا تعني انه في كل مرة ستبدأ الحركة ستبدأ من نقطة 0%
  5. reverse هي القيمة العكسية ل normal  حيث يبدأ من نقطة 100% الي 0% وهنا تعني ان في كل مرة ستبدأ الحركة ستبدأ من نقطة 100%
  6. alternate وهنا سيبدأ من نقطة 0% ولكن عندما يصل الي نقطة 100% سيبدا منها الحركة بحيث ان يتحرك الاتجاهين بدون الحاجه لبدئ من نقطة محددة اي نقطة يصل اليها وينتهي سيبدأ منها.
  7. alternate-reverse وهي عكس السابقة تختلف انها تبدأ من نقطة 100% فقط ، وايضا لن تشعر انه يقف عند نقطة بل سيبدا وينتهي من النقطة التي يصل لها

هل ترغب في فهمها اكثر يمكنك تجربة هذا

اضغط هنا للمشاهدة

%d8%b4%d8%b1%d8%ad-keyframe-animations-%d9%81%d9%8a-css-1

اما بالنسبة ل Keyframe  هو مسار الحركة والتغييرات التي ستحدث ويتم كتابتة علي هذا الشكل :


@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}

وهنا mymove  هي اسم keyframe ويتم استدعائها في عنصر animation ويمكن كتابتها ايضا علي هذا الشكل :


@keyframes mymove {
0%   {top: 0px;}
25%  {top: 200px;}
50%  {top: 100px;}
75%  {top: 200px;}
100% {top: 0px;}
}

الفرق بين الاولي والثانية ان في :

الاولي :  تم كتابة نقطة البداية from ونقطة النهاية to

الثانية : تم تجزئة المسار الي 0% نقطة البداية  و 25% تعني بعد 25% حركة العنصر وهكذا الي 100% تعني نهائية العنصر، ليكن ارغب في النقطة 0% ان يتم اعطاء خلفية لون احمر  ff0000 وبعد مرور 25% من الوقت يتم تغييرها الي اسود 000000 وبعد مرور 50% تصبح لونها ازرق 0000ff  وبعد مرور 75% يتم تغيرها الي لون ابيض fff وعند النهاية 100% تصبح لون احمر ff0000، سيتم كتابتها علي الشكل التالي :


@keyframes mymove {
0%   {backgeound-color: #ff0000;}
25%  {backgeound-color: #000000;}
50%  {backgeound-color: #0000ff;}
75%  {backgeound-color: #fff}
100% {backgeound-color: #ff0000;}
}

وهكذا يمكن ضم العنصرين علي هذا الشكل :

div {

animation: mymove 5s linear 2s infinite alternate;

}
@keyframes mymove {
0%   {backgeound-color: #ff0000;}
25%  {backgeound-color: #000000;}
50%  {backgeound-color: #0000ff;}
75%  {backgeound-color: #fff}
100% {backgeound-color: #ff0000;}
}

 

قم بتطبيق الشرح السابق وقم بمشاهدة نماذج اخري وشروحات اخري وسوف تستطيع بناء حركات معقدة ورائعه ايضا 😉 اي اسئله او توضيح، قم بتركة في التعليقات.