transition 🔥 transform 🔥 animation 🔥

في هذا الدرس سوف نشرح ثلاث خصائص في لغة ال CSS وهذه الخصائص الثلاث التي تتحكم في كيفية تَحرُك وانتقال العناصر من الحالة الابتدائية الي الحالة النهائية وهؤلاء الخصائص هم:

  1. Transform
  2. Transition
  3. Animation

⚠ سوف نشرح اهم الاكواد فقط الخاصة بهؤلاء العناصر الثلاث

شرح CSS transform

- Transform معناها التحول او convert
- - ال transform يُستخدم لتحريك (translate) و تدوير (rotate) و تكبير وتصغير (scale) العنصر.
- اهم الاكواد الخاصة بال transform هي :

1transform: translate(x, y);

هذا الكود يُستخدم لتحريك العنصر على محور x → ومحور y ↓
مثال علي ذلك:
إذا أردنا تحريك العنصر بقيمة 100px جهة اليمين وايضاً تحريكه 150px لأعلي فيكون الكود كالتالي:
transform: translate(100px, -150px);
مع ملاحظة ان:
- القيمة السالبة بالنسبة لمحور x تعني تحريك العنصر جهة اليسار.
- القيمة السالبة بالنسبة لمحور y تعني تحريك العنصر لأعلي.
للمزيد من الامثلة

2transform: scale(x, y);

هذا الكود يُستخدم لعمل scale للعنصر بالعرض والطول
مثال علي ذلك:
- إذا كانت قيمة ال x تساوي 2 فمعني ذلك ان العنصر سوف يتمدد يتمدد على محور ال x (يتمدد بالعرض) الي ضعف العرض.
- إذا كانت قيمة ال y تساوي 0.5 فمعني ذلك ان العنصر سوف يتقلص على محور ال y (ينكمش بالطول) الي النصف.
فيكون الكود كالتالي :
transform: scale(2, 0.5);
للمزيد من الامثلة


3transform: rotate(رقم deg);

هذا الكود يُستخدم لتدوير العنصر بزاوية معينة
مثال علي ذلك:
إذا أردنا تدوير العنصر بزاوية 90 درجة فيكون الكود كالتالي:
transform: rotate(90deg);
للمزيد من الامثلة

شرح CSS transition

- transition معناها الإنتقال او switch
- ال transition يُستخدم لتحويل العنصر من حالته الابتدائية الي حالته النهائية بسلاسة ونعومة.

- طريقة كتابة الكود:
transition: المدة    الخاصية ;
- الخاصية: وتشمل جميع خواص لغة ال CSS مثل الheight او الwidth وجميع الخصائص الي يُمكن اضافتها للعنصر وفي اكثر الأحيان نضع all وتعني جميع الخصائص.

- المدة: وفي هذه القيمة نضع مكانها المدة الزمنية بالثواني التي سوف يستغرقها العنصر للتحول من القيمة الابتدائية الي القيمة النهائية.

مثال علي ذلك:
إذا كان العنصر (div) عرضة 100px وإذا أردنا تحويل العنصر الي 300px عند الوقوف عليه بالماوس بسلاسة ونعومة فيكون الكود كالتالي:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
            div {
                width: 100px;
                transition: all 3s;
                border: 2px solid #333333;}
 
            div:hover {width: 300px;}
    </style>
  </head>
 
  <body>
    <div>ali hassan ♥</div>
  </body>
 
</html>

⚠ ويُمكنا ان نستخدم transition: width 3s; بدلاُ من transition: all 3s; ولكن بنريح دماغنا ونخليها all عشان يعمل transition لجميع عناصر ال CSS إن وجدت

⚠ يتم وضع كود ال transition داخل العنصر الأساسي (div) وليس (div:hover)

شرح CSS animation

خاصية ال Animation تقريبا مثل خاصية ال transition ولكن بدلاً من تغيير العنصر من الحالة الابتدائية الي الحالة النهائية خلال عدد ثواني معين؛ هنا في خاصية ال Animation يُمكننا التحكم في جميع مراحل تغير العنصر ويُمكننا التحكم بصورة أكبر في كيفية تحريك (Animate) العنصر

⚠ مثال علي ذلك:
- خاصية ال transition تُمكننا من التحكم في كيفية الانتقال من النقطة A الي النقطة B
- بينما خاصية ال Animation تُمكننا من التحكم في كيفية الانتقال من النقطة A, B, C, D, or E …. .

متي نستخدم خاصية ال Animation

  1. عندما نُريد تحريك عنصر عند بداية دخول المستخدم الي صفحة معينة.
  2. عندما نُريد التحكم في كيفية انتقال عنصر ما من بين أكثر من نقطتين.
  3. انتقال عنصر بين أكثر من مكان داخل الصفحة والعديد من الاستخدامات الأخرى.

كيفية استخدام ال Animation
أولا يتم اختيار اسم لل Animation وايضاً تحديد ماذا يفعل ال Animation
مثال علي ذلك:

 
@keyframes mymove {
  0%   {transform: translate(0, 0);}
  20%  {transform: translate(100px, 0);}
  40%  {transform: translate(100px, 100px);}
  60%  {transform: translate(0, 100px);}
  100% {transform: translate(0, 0);}
}

وهنا اسم ال Animation هو mymove
وسيتم شرح هذه الاكواد بالتفصيل في الفيديو

ثانياً استخدام هذا الكود

animation: عدداللفات   عددالثواني   اسم الانيميشن ;

مثال علي ذلك:

  1. عملنا Animation فوق اسمة mymove (اسم الانيميشن)
  2. تحديد عدد الثواني لعمل لفه واحده (عدد الثواني)
  3. تحديد كم مره تُريد تنفيذ هذا الانيميشن (عدد اللفات)

ويكون الكود كالتالي:
animation: mymove 3s 5;
شرح الكود:

Mymove : اسم الانيميشن
3s : 3 ثواني
5 : عدد مرات تنفيذ الانيميشن (5 لفات)

⚠ إذا أردنا تنفيذ هذا ال Animation عدد لانهائي من المرات (اللفات) فإننا نستخدم كلمة infinite ويكون الكود كالتالي:
animation: mymove 3s infinite;
ويكون الكود النهائي هو:

 
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
 
          div {
              width: 100px;
              height: 100px;
              background: red;
              animation: mymove 1s infinite;
              }
          
          @keyframes mymove {
              0%   {transform: translate(0, 0);}
              20%  {transform: translate(100px, 0);}
              40%  {transform: translate(100px, 100px);}
              60%  {transform: translate(0, 100px);}
              100% {transform: translate(0, 0);}
              }
 
    </style>
  </head>
 
  <body>
    <div>ali hassan ♥</div>
  </body>
 
</html>

⚠ زي ما انا قولتك يا صاحبي 🧡 ان دي أشهر الاكواد الخاصة بال transform, transition and animation

- وعشان تحترف الخواص دي ممكن تدور على اليوتيوب على كورس كامل لل animation فقط او ال transition و ال transform فقط. (ايواااا كورس كامل 😊 )

- طبعا هتلاقى فيديوهات اجنبية كتير جداً والعربي قليل.

- بالنسبة للعربي ستجد المهندس أسامة صاحب قناة الزيرو ويب سكول عامل فيديوهات كتير جداً عن الثلاث خواص دول ال transform, transition and animation في في كورس ال CSS 3 الموجود على قناته.
- بالنسبة لل transform من الفيديو #10 الي الفيديو #22
- بالنسبة لل transition من الفيديو #32 الي الفيديو #35
- بالنسبة لل animation من الفيديو #39 الي الفيديو #48

😡
انت مشغل الـ AdBlock !!

ياريت تقفله لوسمحت 😊 😊

تنبيه هام ✋

إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك