কম্পিউটার

CSS ব্যবহার করে ধীরগতির সাথে অ্যানিমেশন সেট করুন


CSS এর সাথে ধীরগতির শুরুতে অ্যানিমেশন সেট করতে সহজ-ইন মান সহ অ্যানিমেশন-টাইমিং-ফাংশন বৈশিষ্ট্য ব্যবহার করুন

উদাহরণ

<!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: ease-in;}
      </style>
   </head>
   <body>
      <div id = "demo">ease-in effect</div>
   </body>
</html>

  1. CSS এর সাথে সমস্ত অ্যানিমেশন বৈশিষ্ট্য সেট করতে শর্টহ্যান্ড প্রপার্টি

  2. CSS ব্যবহার করে অ্যানিমেশন চলমান বা পজ করা হচ্ছে কিনা তা সেট করুন

  3. CSS ব্যবহার করে একটি ধীর শেষের সাথে অ্যানিমেশন সেট করুন

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