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

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

CSS @keyframes এবং animation প্রোপার্টি ব্যবহার করে font-weight প্রোপার্টিতে অ্যানিমেশন করা যায়।

উদাহরণ

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

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      p { 
        border: 2px solid black; 
        width: 400px; 
        height: 100px; 
        animation: myanim 5s infinite; 
      } 
      @keyframes myanim { 
        70% { 
          font-weight: bold; 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <p>This is demo text</p> 
  </body> 
</html>

ব্যাখ্যা: @keyframes myanim এ ৭০% কীফ্রেমে font-weight: bold সেট করা হয়েছে। অ্যানিমেশন ৫ সেকেন্ডে সম্পন্ন হয় এবং infinite দিয়ে বারবার চলে। ডিফল্টে ফন্ট ওয়েট নরমাল (৪০০), ৭০% এ.bold (৭০০) হয়ে আবার নরমালে ফিরে আসে। দ্রষ্টব্য: সব ফন্টে সব ওয়েট থাকে না।

  1. CSS line-height প্রপার্টিতে অ্যানিমেশন করুন

  2. CSS perspective-origin প্রপার্টিতে অ্যানিমেশন করুন

  3. CSS perspective প্রপার্টিতে অ্যানিমেশন করুন

  4. CSS padding-top প্রপার্টিতে অ্যানিমেশন করুন