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

CSS-এ background-position প্রোপার্টি অ্যানিমেট করা

ব্যাকগ্রাউন্ড পজিশন অ্যানিমেট করতে @keyframes ব্যবহার করুন। নিচের উদাহরণটি দেখুন।

উদাহরণ

<!DOCTYPE html> <html>    <head>       <style>          div {             width: 500px;             height: 400px;             background: yellow;             background-image: url('https://www.tutorialspoint.com/latest/microservice_architecture.png');             animation: myanim 3s infinite;             background-position: bottom left;          }          @keyframes myanim {             20% {                background-color: maroon;                background-position: bottom right;             }          }       </style>    </head>    <body>       <div></div>    </body> </html>
  1. CSS perspective-origin প্রপার্টিতে অ্যানিমেশন করুন

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

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

  4. CSS অ্যানিমেশন দিয়ে transform প্রপার্টি অ্যানিমেট করুন