ميزة الإنتقال CSS : تفعيل الزمن في لغة CSS أثناء التصميم

ميزة الإنتقال CSS توفر لنا العديد من المزايا الموجودة في مكتبات الرسومات الأخرى , حيث أنها تعتمد على التحويل والتغيير عبر مؤقت الإطارات ، ما يسمح للعناصر بالظهور بطريقة لافتة للنظر.

 

تعريف

تحتوي ميزة الإنتقال  CSS على مؤقت بسيط يتم استدعاؤه بسهولة شديدة ويحتوي بشكل عام على بناء جملة أساسي:

transition:all 1.5s ;

تعتمد وظيفة الانتقال على إجراء بعض التعديلات على علامات ووسوم HTML الخاصة التي تحتوي عليها ، حيث تنقسم عناصرها الأساسية إلى:

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

 

فوائد ميزة الإنتقال CSS

هناك العديد من الفوائد التي سنجدها عند استخدام الانتقال وهي:

  • إضافة ميزات وجماليات للمحتوى بطريقة رائعة.
  • تنسيق علامات HTML مع الحفاظ على المظهر العام للصفحة.

 

عيوب استخدام ميزة الإنتقال CSS

كالعادة ، هناك نقاط ضعف وقوة في جميع الأدوات ، وسنذكر العيوب المتعلقة بـ ميزة الإنتقال ، وهي:

  • بطىء عند تحميل محتويات الصفحة.
  • مشاكل الاستجابة للأجهزة الطرفية والشاشات الصغيرة ما يجعلها محدودة الاستخدام.

 

مثال

من فضلك ، لفهم ميزة الإنتقال جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

div{
    width:100px;
    height:100px;
    text-align:center;
    background-color:#D9D9D9;
    margin: 50px Auto;
    color:#FFFFFF;
    transition:all 1.5s , background-color 6s;
}

div:hover{
    width:200px;
    height:200px;
    background-color:#390505;
    font-size : 30px;
}

 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS Transition</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div>Welcome To CSS</div>
    </body>

</html>