CSS clip প্রোপার্টিতে অ্যানিমেশন করুন

CSS clip প্রোপার্টি (এখন অবচিত, clip-path ব্যবহার করা উচিত) একটি絶對 পজিশন করা এলিমেন্টের দৃশ্যমান অংশ নির্ধারণ করে। এতে অ্যানিমেশন করা যায়।

উদাহরণ

নিচের কোডটি চালিয়ে clip প্রোপার্টিতে অ্যানিমেশন করার উদাহরণ দেখুন:

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      div { 
        width: 200px; 
        height: 300px; 
        background: yellow; 
        border: 10px solid red; 
        animation: myanim 3s infinite; 
        bottom: 30px; 
        position: absolute; 
        clip: rect(0,100px,50px,0); 
      } 
      @keyframes myanim { 
        20% { 
          bottom: 100px; 
          clip: rect(0,150px,40px,0); 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <h2>Performing Animation on clip property</h2> 
    <div></div> 
  </body> 
</html>

ব্যাখ্যা: clip: rect(top, right, bottom, left) এলিমেন্টের কোন অংশ দেখাবে তা নির্ধারণ করে। এখানে position: absolute জরুরি। ২০% এ clip: rect(0,150px,40px,0) দিয়ে ক্লিপিং এলাকা পরিবর্তন করা হয়েছে। আধুনিক CSS-এ clip-path: inset() বা polygon() ব্যবহার করা ভালো।