transitions - Nouvil

شرح خاصية transitions

خاصية CSS transitions تسمح بتغيير خصائص العناصر الواجهة الرسومية على صفحة الويب بشكل سلس وانسيابي، وتعتبر وسيلة سهلة وفعالة لإضافة حركة وديناميكية لصفحات الويب. يمكن استخدام خاصية CSS transitions في أي خاصية يمكن تغييرها بواسطة CSS.

تعمل خاصية CSS transitions عن طريق تحديد الخصائص التي تريد تغييرها ومدة الوقت المطلوب لتنفيذ التغيير. عندما يتم تحديد الخصائص والوقت، يقوم المتصفح بتطبيق التغييرات بشكل تدريجي خلال فترة زمنية محددة، مما يسمح بتغيير التصميم بطريقة سلسة ومرنة.

يمكن تحديد الخصائص التي تريد تغييرها بواسطة خاصية CSS transitions باستخدام القيمة الأولى في الخاصية، ويمكن تحديد مدة الوقت المطلوب لتنفيذ التغييرات باستخدام القيمة الثانية في الخاصية. يمكن تحديد مدة الوقت بالثواني أو الأجزاء العشرية من الثانية.

فيما يلي شرح للخصائص الأساسية لخاصية CSS transitions:

1- الخاصية الأولى: transition-property
تحدد الخصائص التي سيتم تطبيق عليها خاصية الانتقال. يمكنك تحديد أي رقم من الخصائص التي يتم تغييرها بواسطة CSS، مثل الألوان والحجم والشفافية والموقع والخطوط والخلفيات والظلال. يمكن تحديد أكثر من خاصية واحدة باستخدام فاصلة.

مثال:

div {
  transition-property: background-color, color;
}

2- الخاصية الثانية: transition-duration
تحدد مدة الوقت المطلوب لتنفيذ التغييرات. يمكن تحديد الوقت بالثواني أو الأجزاء العشرية من الثانية.

مثال:

div {
  transition-duration: 2s;
}

3- الخاصية الثالثة: transition-timing-function
تحدد نمط التحول أو الانتقال. يمكن استخدام النماذج الأساسية مثل الخطي، والتسارع، والتباطؤ، والتأخير. كما يمكن استخدام الدوال الرياضية مثل cubic-bezier() لتحديد التحول بدقة أكبر.

مثال:

div {
  transition-timing-function: ease-in-out;
}

4- الخاصية الرابعة: transition-delay
تحدد تأخير الانتقال. يمكن تحديد الوقت بالثواني أو الأجزاء العشرية من الثانية.

مثال:

div {
  transition-delay: 1s;
}

يمكن استخدام خاصية CSS transitions بعدة طرق مختلفة، من بينها:

1- تحويم الفأرة (hover) : يمكن تحديد تغييرات CSS عند تحويم الفأرة على العنصر.

مثال:

div {
  transition: background-color 1s;
}

div:hover {
  background-color: #f00;
}

2- تغيير الحالة: يمكن تحديد تغييرات CSS عند تغير حالة العنصر، مثل النقر على زر أو التحكم في عنصر الإدخال.

مثال:

button {
  transition: background-color 1s;
}

button:active {
  background-color: #f00;
}

3- تغيير الحجم: يمكن تحديد تغييرات CSS عند تغيير حجم العنصر، مثل تغيير حجم الخط أو حجم العنصر.

مثال:

h1 {
  transition: font-size 1s;
}

h1:hover {
  font-size: 48px;
}

4- تغيير الوقت: يمكن تحديد تغييرات CSS عند مرور فترة زمنية محددة، مثل تغيير صورة بشكل تدريجي بين فترات زمنية مختلفة.

مثال:

img {
  transition: opacity 1s;
}

img:hover {
  opacity: 0;
}

img:focus {
  opacity: 1;
}

يمكن تحسين استخدام خاصية CSS transitions بواسطة استخدام خاصية CSS transform وخاصية CSS animation، والتي تسمح بتحريك العناصر وتكرار التحولات بشكل مستمر. كما يمكن استخدام خاصية CSS transitions لتحريك العناصر بشكل أفقي أو رأسي، وتحريك العناصر بشكل ثلاثي الأبعاد.

يمكن استخدام خاصية CSS transitions بشكل فعال لإضافة حركة وديناميكية لصفحات الويب، وتحسين تجربة المستخدم وجذب الانتباه إلى المحتوى الرئيسي. على الرغم من أن خاصية CSS transitions تعتبر سهلة الاستخدام، إلا أنه يجب الانتباه إلى أنه يجب تحديد الخصائص المناسبة والوقت المناسب لتحقيق التأثير المطلوب دون تأثير سلبي على أداء الموقع.

يمكن استخدام خاصية CSS transitions بشكل متقدم لتحقيق تأثيرات مدهشة على صفحات الويب، ويمكن توجيهها لإضافة تأثيرات متعددة أو متداخلة لتحقيق تجربة مستخدم فريدة وممتعة.

يمكن تحقيق تأثيرات مختلفة باستخدام خاصية transition-property، والتي تحدد الخصائص التي سيتم تطبيق عليها خاصية الانتقال. يمكن تحديد العديد من الخصائص في نفس الوقت، مثل اللون والشفافية والموقع والحجم والخطوط والظلال والدوران والتدوير.

يمكن استخدام خاصية transition-duration لتعيين مدة الانتقال، وهذا يعني أنه يمكن تحديد مدة الوقت اللازم لتنفيذ التغييرات، مثلاً ثانية واحدة أو ثواني عشرة. كلما زادت مدة الانتقال، كلما زادت سلاسة التحول وكلما زادت الجودة الإجمالية للتأثير.

يمكن استخدام خاصية transition-timing-function لتحديد نمط التحول، وتعني هذه الخاصية كيفية تحرك العنصر خلال فترة الانتقال. يمكن استخدام الأنماط الأساسية مثل linear و ease و ease-in و ease-out و ease-in-out، أو يمكن استخدام الدوال الرياضية مثل cubic-bezier() لتحديد النمط بدقة أكبر.

يمكن استخدام خاصية transition-delay لتحديد تأخير الانتقال، ويمكن استخدام هذه الخاصية لتحقيق تأثيرات تزداد تعقيدًا، مثل تأخير عملية الانتقال أو تأخير تحديث العنصر بعد تحريكه.

شرح CSS transition shorthand

خاصية CSS transition shorthand هي خاصية تجمع بين عدة خصائص مختلفة لتحديد التأثيرات الانتقالية في صفحة الويب، بدلاً من استخدام كل خاصية بشكل منفصل. تستخدم هذه الخاصية لتحديد خصائص الانتقال التي تريد تطبيقها على العنصر المحدد، مثل العرض والارتفاع واللون والشفافية والموقع والحجم والخطوط والظلال والدوران والتدوير.

تتألف خاصية CSS transition shorthand من أربعة أجزاء رئيسية:

transition-property: وتحدد الخصائص التي تريد تطبيق عليها التأثير الانتقالي، ويمكن أن تحتوي هذه الخاصية على أكثر من خاصية واحدة، ويمكن تحديدها بفاصلة.
transition-duration: وتحدد مدة الانتقال، أي الوقت الذي يستغرقه التحول من حالته الأولى إلى حالته الثانية. يمكن تحديد هذه الخاصية بالثواني أو الجزء العشري من الثانية، ويمكن أيضاً استخدام الكلمات الرئيسية مثل “slow” و “fast” و “normal”.
transition-timing-function: وتحدد نمط التحول، وهي الطريقة التي يتحرك بها العنصر المحدد خلال فترة الانتقال. يمكن استخدام قيم متعددة مثل linear و ease و ease-in و ease-out و ease-in-out، ويمكن أيضًا استخدام الدوال الرياضية مثل cubic-bezier().
transition-delay: وتحدد التأخير قبل بدء التأثير الانتقالي، ويمكن تحديدها بنفس الوحدات التي تم استخدامها في خاصية transition-duration.

يمكن تحديد خاصية CSS transition shorthand بالشكل التالي:

transition: property duration timing-function delay;

على سبيل المثال، إذا أردت تطبيق تأثير انتقالي على خاصية العرض والارتفاع لصورة عندما يتم تحويلها إلى حالتها المختلفة، وتحديد مدة الانتقال لمدة 0.5 ثانية ونمط التحول كـ ease-in-out وتحديد تأخير قدره 0.2 ثانية، يمكن استخدام الخاصية CSS transition shorthand على النحو التالي:

img {
  transition: width 0.5s ease-in-out 0.2s, height 0.5s ease-in-out 0.2s;
}

باستخدام خاصية CSS transition shorthand، يمكن تحقيق تأثيرات انتقالية متعددة بسهولة وكفاءة، وتحسين تجربة المستخدم وزيادة جاذبية المحتوى.

السابق التالي

شرح خاصية transitions

شرح CSS transition shorthand

Login