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

অ্যানিমেশনের গতি কার্ভ সেট করার CSS প্রোপার্টি

অ্যানিমেশনের গতি কার্ভ সেট করতে animation-timing-function ব্যবহার করুন। ease এবং ease-in ইফেক্ট সেট করতে নিচের কোডটি রান করুন:

উদাহরণ

<!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;}          }          #demo1 {animation-timing-function: ease;}          #demo2 {animation-timing-function: ease-in;}       </style>    </head>    <body>       <div id = "demo1">ease effect</div>       <div id = "demo2">ease-in effect</div>    </body> </html>

  1. CSS-এ grid template প্রপার্টি সেট করুন

  2. CSS-এ টেক্সটে ব্যবহৃত ডেকোরেশনের ধরন সেট করুন

  3. CSS border-width প্রোপার্টি

  4. CSS-এ max-height প্রপার্টি