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

CSS के साथ फीके आउट एनिमेशन प्रभाव


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 fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }
         @keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }
         .fadeOut {
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
         }
      </style>
   </head>
   <body>
      <div id="animated-example" class="animated fadeOut"></div>
      <button onclick="myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

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

    CSS के साथ Flip Out Y एनिमेशन प्रभाव को लागू करने के लिए, आप निम्न कोड को चलाने का प्रयास कर सकते हैं <html>    <head>       <style>          .animated {             background-image: url(/css/images/lo

  1. CSS के साथ एनिमेशन प्रभाव रोल आउट करें

    CSS के साथ रोलआउट एनिमेशन प्रभाव बनाने के लिए, आप निम्न कोड को चलाने का प्रयास कर सकते हैं - उदाहरण <html>    <head>       <style>          .animated {             background-image: url(/css/images/logo

  1. सीएसएस के साथ एनिमेशन प्रभाव को घुमाएं

    CSS के साथ रोटेट आउट एनीमेशन प्रभाव बनाने के लिए, आप निम्न कोड को चलाने का प्रयास कर सकते हैं - उदाहरण <html>    <head>       <style>          .animated {             background-image: url(/css/images/l