CSS Transition Property Using Hover

 

hover কখন Apply হয়? নিশ্চই যখন মাউস আমরা সেই Area টার উপর নিয়ে যাই। hover এর মধ্যে যে সকল প্রোপার্টি দিয়ে দেই সেগুল Active হয়ে যায়। সেই প্রোপার্টিগুল Active হয় খুব দ্রুত। আমরা চাচ্ছি এগুলা Active হবে আস্তে আস্তে দেখতে অনেক ভাল লাগবে । এজন্যই মুলত আমাদের Transition ব্যবহার করতে হবে। 

transition: <property> <duration> <timing-function> <delay>;

Property: এখানে কোন ধরনের Transition হবে তার নাম । যেমনঃ width, height, translate, fon-size ইত্যাদি

আবার সব গুল যদি apply করতে হয় তাহলে all লিখতে হবে ।

Duration: কতখন চলবে সেই সময়। 1s, 2s, 2s ইত্যাদি হতে পারে। 

Timing function: 

1. linear
2. ease (by defult)
3. ease-in 
4. ease-out () (slow will be last position)
5. ease-in-out
6. steps() 

Delay: কতক্ষন পরে Transition শুরু হবে । এটাও সেকেন্ড এককে হবে। 

Transition ব্যাবহার করা হয় যেই ক্লাস বা যেই এলিমেন্ট কে আমরা move করতে চাচ্ছি।
আর Transformation ব্যবহার করা হয় , hover এর মধ্যে অথবা কোন Event ঘটার পর Active হবে ।
যেমন Hover করলে তার পরে গিয়ে Transform property গুল Active হবে তা হলে তো সেগুল Hover এর মধ্যে রাখতে হবে ।