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

CSS দিয়ে অ্যানিমেশনের শুরু থেকে শেষ পর্যন্ত একই গতি সেট করুন


CSS-এ অ্যানিমেশনের শুরু থেকে শেষ পর্যন্ত একই গতি রাখতে animation-timing-function প্রপার্টির linear মান ব্যবহার করুন।

উদাহরণ

<!DOCTYPE html> <html>    <head>       <style>          div {             width: 150px;             height: 200px;             position: relative;             background-color: yellow;             animation-name: myanim;             animation-duration: 2s;             animation-direction: alternate-reverse;             animation-iteration-count: 3;          }          @keyframes myanim {             from {left: 100px;}             to {left: 200px;}          }          #demo {animation-timing-function: linear;}       </style>    </head>    <body>       <div id = "demo">linear effect</div>    </body> </html>

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

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

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

  4. CSS-এ লিনিয়ার গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড ইমেজ হিসেবে সেট করা