কম্পিউটার টিউটোরিয়াল

CSS দিয়ে ট্রানজিশন ইফেক্টের গতি কার্ভ সেট করা

ট্রানজিশন ইফেক্টের গতি কার্ভ সেট করতে transition-timing-function প্রোপার্টি ব্যবহার করুন। মানগুলো হতে পারে: ease, ease-in, ease-out, linear ইত্যাদি।

উদাহরণ

CSS দিয়ে ট্রানজিশন ইফেক্টের গতি কার্ভ সেট করতে নিচের কোডটি রান করুন:

<!DOCTYPE html> <html>    <head>       <style>          div {             width: 100px;             height: 100px;             background: red;             transition: width 4s;          }          #effect1 {             transition-timing-function: linear;          }          #effect2 {             transition-timing-function: ease-in;          }          div:hover {             width: 250px;          }       </style>    </head>    <body>       <h1>Transition Effect</h1>       <p>Hover over the div elements and see the transition effect and the speed:</p>       <div id = "effect1">linear effect</div><br>       <div id = "effect2">ease-in effect</div><br>    </body> </html>

  1. CSS দিয়ে অ্যানিমেশনের গতি বক্র নির্দিষ্ট করুন

  2. CSS দিয়ে বাটনের প্রস্থ সেট করুন

  3. CSS দিয়ে হোভার ইফেক্টের গতি সেট করুন

  4. CSS দিয়ে ওভারলে ইফেক্ট তৈরি করার পদ্ধতি