CSS border-bottom-right-radius প্রোপার্টিতে অ্যানিমেশন করুন

CSS @keyframes ব্যবহার করে border-bottom-right-radius প্রোপার্টিতে অ্যানিমেশন করা যায়, যা কোণার বক্রতা পরিবর্তন করে।

উদাহরণ

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

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      div { 
        width: 500px; 
        height: 400px; 
        background: yellow; 
        border: 10px solid yellow; 
        border-bottom-right-radius: 150px; 
        background-image: url('https://www.tutorialspoint.com/latest/electronic_measuring_instruments.png'); 
        animation: myanim 3s infinite; 
        background-position: bottom left; 
        background-size: 50px; 
      } 
      @keyframes myanim { 
        20% { 
          background-color: maroon; 
          background-size: 90px; 
          border-bottom-color: green; 
          border-bottom-right-radius: 50px; 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <h2>Performing Animation bottom border right radius</h2> 
    <div></div> 
  </body> 
</html>

ব্যাখ্যা: ডিফল্টে নিচে ডান কোণা ১৫০পিক্সেল বক্র। ২০% কীফ্রেমে: border-bottom-right-radius: 50px (কোণা কম বক্র), background-color: maroon, background-size: 90px, border-bottom-color: green। অ্যানিমেশন ৩ সেকেন্ডে লুপ চলে। একসাথে একাধিক প্রোপার্টি অ্যানিমেট করা যাচ্ছে।