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

CSS-এ opacity প্রপার্টিতে অ্যানিমেশন প্রয়োগ করতে নিচের কোডটি চালান:

উদাহরণ

<!DOCTYPE html>
<html>
  <head>
    <style>
      #demo1 {
        position: absolute;
        top: 60px;
        width: 300px;
        height: 150px;
        background-color: lightblue;
        animation: myanim 4s infinite;
      }
      #demo2 {
        position: absolute;
        top: 90px;
        left: 30px;
        width: 300px;
        height: 150px;
        background-color: orange;
        animation: myanim 3s infinite;
      }
      #demo3 {
        position: absolute;
        top: 120px;
        left: 60px;
        width: 350px;
        height: 150px;
        background-color: coral;
      }
      @keyframes myanim {
        30% {
          opacity: 0.4;
        }
      }
    </style>
  </head>
  <body>
    <p>Showing opacity</p>
    <div id="demo1"><h1>End div</h1></div>
    <div id="demo2"></div>
    <div id="demo3"><h1>Start div</h1></div>
  </body>
</html>