Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> CSS

सीएसएस के साथ एनीमेशन प्रभाव में फीका

Fade In Animation Effect को 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 fadeIn {
            0% {opacity: 0;}
            100% {opacity: 1;}
         }

         @keyframes fadeIn {
            0% {opacity: 0;}
            100% {opacity: 1;}
         }

         .fadeIn {
            -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
         }

      </style>

   </head>
   <body>

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

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

   </body>
</html>

  1. सीएसएस के साथ फ्लिप एनिमेशन प्रभाव

    एक तत्व अचानक तेज गति से पलट सकता है या पलट सकता है। उदाहरण <html>    <head>       <style>          .animated {             background-image: url(/css/images/logo.png);         &nb

  1. सीएसएस के साथ फ्लैश एनिमेशन प्रभाव

    किसी तत्व की तेज रोशनी का अचानक संक्षिप्त विस्फोट फ्लैश प्रभाव पैदा करता है। उदाहरण <html>    <head>       <style>          .animated {             background-image: url(/css/images/logo.png);  

  1. सीएसएस के साथ बड़े एनिमेशन प्रभाव को फीका करें

    CSS के साथ एक छवि पर फेड आउट बिग एनिमेशन प्रभाव को लागू करने के लिए, आप निम्नलिखित कोड को चलाने का प्रयास कर सकते हैं - उदाहरण <html>    <head>       <style>          .animated {             backgrou