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


motion

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

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

في البداية عند كتابتك لخاصية transition هي مثلها مثل خاصية background مثلا تستطيع كتابتها بالشكل التالي :

body {

background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;

}

,ويمكنك دمج كل هذة النقاط في سطر واحد ليكن


body {

background: #ffffff url("img_tree.png") no-repeat right top;

}

لذلك transition  ايضا تحتوي علي property وهم :

transition-property: وتاخذ اما all او العنصر المراد التاثير عليه ليكن width او background

transition-duration: وتاخد الوقت مثل 1s و 0.5s

transition-timing-function: هنا تاخذ اما

  1.  linear
  2.  ease
  3. ease-in
  4. ease-out
  5. ease-in-out

الكثير هنا قد يختلط عليه الامر في بداية كل قيمة تعبر عن طريقة حركة

  1. بالنسبة ل linear تعني حركة ثابته من البداية للنهاية
  2. بالنسبة ل ease تعني حركة بطيئة من بداية والنهاية وسريعه في المنتصف
  3. بالنسبة ل ease-in تعني حركة بطيئة في البداية وسريعه في النهاية
  4. بالنسبة ل ease-out  هي عكس السابقة سريعه في بداية وبطيئة في النهاية
  5. بالنسبة ل ease-in-out هي عكس ease  حيث حركة بطيئة في منتصف وسريعه من بداية للنهاية

screenshot-21

اذا كنت تريد التحكم في سرعه الحركة بنفسك يمكنك استخدام  cubic-bezier(1,1,1,1) وهي تاخذ قيمة اما ب 1 او 0 ويمكنك التجربة باستخدام الموقع التالي وصناعه التاثير المناسب لك ومقارنة ايضا بالتاثيرات السابقه وفهمها بشكل افضل من الكتابة بالتاكيد :

transition-delay : هذة الخاصة تاخذ وقت مثل 1s حيث تعني تاخر بدئ الحركة بعد 1 ثانية

لذلك يمكننا تطبيق التاثير التالي :

body {
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in-out;
transition-delay: .5s;
}

ويمكننا ايضا اختصارة في سطر علي الشكل التالي :

body {
transition: all 1s ease-in-out .5s;
}

body {
او يمكن كتابة السطر باستخدام cubic-bezier(1,1,1,1) علي الشكل التالي :

body {
transition: all 1s cubic-bezier(.46,.18,.6,.88) .5s;
}

وهنا ينتهي الموضوع اي شئ ترغب في توضيحة يمكنك تركة في تعليق حاول قرائة الموضوع وتجربة اكثر من مرة وستجد انها خاصية بسيطة جدا تحتاج فقط لتدريب وفهم.