কম্পিউটার

CSS এর সাথে ফেড ইন ডাউন অ্যানিমেশন ইফেক্ট


সিএসএস সহ একটি ছবিতে ফেড ইন ডাউন বিগ অ্যানিমেশন প্রভাব প্রয়োগ করতে, আপনি নিম্নলিখিত কোডটি চালানোর চেষ্টা করতে পারেন -

উদাহরণ

<html>
   <head>
      <style>
         .animated {
            background-image: url(/css/images/logo.png);
            background-repeat: no-repeat;
            background-position: left top;
            padding-top:95px;
            margin-bottom:60px;
            -webkit-animation-duration: 10s;
            animation-duration: 10s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
         }

         @-webkit-keyframes fadeInDown {
            0% {
               opacity: 0;
               -webkit-transform: translateY(-20px);
            }
            100% {
               opacity: 1;
               -webkit-transform: translateY(0);
            }
         }

         @keyframes fadeInDown {
            0% {
               opacity: 0;
               transform: translateY(-20px);
            }
            100% {
               opacity: 1;
               transform: translateY(0);
            }
         }

         .fadeInDown {
            -webkit-animation-name: fadeInDown;
            animation-name: fadeInDown;
         }
      </style>
   </head>

   <body>
      <div id="animated-example" class="animated fadeInDown"></div>
      <button onclick="myFunction()">Reload page</button>

      <script>
         function myFunction() {
            location.reload();
         }
      </script>

   </body>
</html>

  1. CSS এর সাথে ফেড ডাউন বিগ অ্যানিমেশন ইফেক্ট

  2. CSS এর সাথে বিগ অ্যানিমেশন ইফেক্ট ফেইড আউট

  3. CSS এর সাথে ডাউন রাইট অ্যানিমেশন ইফেক্টে ঘোরান

  4. CSS দিয়ে নিচের বাম অ্যানিমেশন ইফেক্টে ঘোরান