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

CSS filter প্রপার্টি অ্যানিমেশন দিয়ে পরিবর্তন করুন


উদাহরণ

CSS-এ filter প্রপার্টিতে অ্যানিমেশন প্রয়োগ করতে, আপনি নিচের কোডটি চালাতে পারেন। এটি একটি div এলিমেন্টের কনট্রাস্ট (contrast) মানের পরিবর্তন দিয়ে একটি সতत অ্যানিমেশন তৈরি করে।

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 600px;
        height: 300px;
        background-image: url('https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg');
        border: 2px solid blue;
        animation: myanim 3s infinite;
        position: absolute;
        column-rule: 10px inset orange;
        column-count: 4;
      }
      @keyframes myanim {
        20% {
          filter: contrast(400%);
        }
      }
    </style>
  </head>
  <body>
    <h2>filter প্রপার্টিতে অ্যানিমেশন সম্পাদন</h2>
    <div></div>
  </body>
</html>

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

  2. CSS top প্রপার্টি অ্যানিমেশন সহ

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

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