كيفية استخدام التحولات CSS3

الجميع يحب الحركة. إن إضافة البعد الرابع (الوقت) إلى تصميم الموقع هو الطريقة الرئيسية التي يتميز بها التصميم القائم على الشاشة عن التصميم المطبوع. تعد CSS Transitions طريقة بسيطة لتحريك خصائص عنصر يتيح لك إثراء أحداث معينة في تصميم موقعك ، دون الحاجة إلى Flash أو JavaScript.

يصف W3C بشكل مناسب عمليات النقل على موقع الويب الخاص به على أنه "يسمح CSS Transitions بتغييرات الخاصية في قيم CSS بحيث تحدث بسلاسة خلال مدة محددة". بعبارة أخرى ، تسمح لنا تحويلات CSS بتعديل خاصية ما بشكل متزايد ، مما يخلق إحساسًا بالحركة وينقل التصاميم بدقة وعاطفة غير ممكنة مع تغيير سريع.

دعم المتصفح

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

من أجل توسيع نطاق دعم المتصفح ، يمكننا استخدام بادئات البائعين ، مما يعمل على توسيع الميزة لتشمل Firefox 4–15 و Opera 10.5–12 ومعظم إصدارات Chrome و Safari. يبدو الرمز ، بما في ذلك بدائل بائع البادئة مثل هذا:

div {-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;transition: all 1s ease;}

تتم إضافة الخاصية غير المسبوقة في أسفل الحزمة للتأكد من أن الإزالة النهائية سوف تتفوق على كافة العناصر الأخرى ، حيث تنتقل الخاصية من المسودة إلى الحالة النهائية.

معلمات الانتقال

هناك أربعة معلمات لتحويلات CSS:

• الخاصية الانتقالية: الخاصية التي يجب مضاهاة ، أو الكلمة الأساسية "الكل" لتطبيقها على جميع الخصائص ؛
• مدة الانتقال: مدة الانتقال ؛
• وظيفة توقيت الانتقال: يتم تطبيق التخفيف ، وهذا يخلق حركة أكثر طبيعية
• transtion-delay: يحدد تأخيرًا لبدء عملية النقل.

بالإضافة إلى ذلك ، يمكنك أيضًا استخدام الخاصية المختزلة (كما في المثال أعلاه) حيث يتم تحديد المعلمات على أنها خاصية أو مدة أو وظيفة توقيت أو تأخير.

الخصائص التي يمكن نقلها

يمكنك فقط نقل الخصائص التي يمكن ترجمتها إلى قيمة رياضية. على سبيل المثال ، يمكنك نقل حجم الخط ؛ لا يمكنك نقل الخط.

القائمة الكاملة للعقارات التي يمكن نقلها حاليًا هي كما يلي:

موضع الخلفية ، الحد السفلي - اللون ، عرض الحد السفلي - الحد ، اللون الأيسر - الحد ، الحد الأيسر - العرض ، اللون الأيسر - الحد ، عرض الحدود - اليمين ، تباعد الحدود ، الحد العلوي - اللون ، الحد الأعلى للعرض ، القاع ، القصاصة ، اللون ، حجم الخط ، وزن الخط ، الارتفاع ، اليسار ، تباعد الحروف ، الهامش السفلي ، الهامش - اليسار ، الهامش - اليمين ، الهامش العلوي ، الحد الأقصى للارتفاع ، الحد الأقصى عرض ، min-height ، min-width ، opacity ، مخطط تفصيلي-color ، outline-width ، padding-bottom ، padding-left ، padding-right ، padding-top ، right ، text-indent ، text-shadow ، top ، vertical- محاذاة ، عرض ، تباعد الكلمات ، z-index.

استخدام التحولات

ترتبط الإعلانات الانتقالية بالحالة العادية للعنصر. لذلك أعلن مرة واحدة فقط لعدة ولايات مثل: التركيز ،: الطبقات النشطة والزائفة.

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

Business
  الشفرة 
  التصميم 
  وحي 
  متنوع 
  التليفون المحمول 
  أخبار 
  مصادر 
  سهولة الاستخدام 
  Integre Posuere erat ante inline link   venenatis dapibus posuere velit aliquet.  Nullam id dolor id nibh ultricies vehicula ut id elit.  Integre posuere erat a ante venenatis dapibus posuere velit aliquet.  Nullam quis risus eget urna mollis ornare vel eu leo. 

إليك كيف يبدو:

هل تستخدم CSS3 انتقالات؟ ما هي التأثيرات التي تمكنت من إنشائها؟ اسمحوا لنا أن نعرف في التعليقات.

صورة مميزة / صورة مصغرة ، صورة الحركة عبر Shutterstock.