كيف أبطئ من حركة تأثيرات hover في CSS ؟

تستطيع جعل الحركة أكثر سلاسةً باستخدام التعليمة Transitions في CSS.

لنفرض أنه لديك الكود التالي :

.circle {
    width:35px;
    height:35px;
    border-radius:50px;
    background-color:#f00;
}
.circle:hover {
    height:50px;
    border-radius:50px;
}

<div class="circle"></div>

عند التنفيذ سيزداد حجم الدائرة بشكل مباشر, ولجعل زيادة الحجم بشكل تدريجي اكتب الكود التالي :

.circle {
    width:35px;
    height:35px;
    border-radius:50px;
    background-color:#f00;
    transition: all 200ms ease-in 0;
}
.circle:hover {
    height:50px;
    border-radius:50px;
    transition: all 300ms ease-in 0;
}

<div class="circle"></div>

تنقسم التعليمة transition إلى 4 أقسام سنحدد وظيفتها كما يلي :

transition: A B C D;

1- قسم A : لتحديد الخاصّية الذي نريد تحريكها بسلاسة كأن نحدد الإطار فقط أو كل العنصر.
2- قسم B : لتحديد سرعة الحركة.
3- قسم C : لتحديد شكل الحركة.
4- قسم D : لتحديد زمن التأخير عن بدء الحركة.

المصدر