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: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
      }
      @-webkit-keyframes bounce {
        0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
        40% {-webkit-transform: translateY(-30px);}
        60% {-webkit-transform: translateY(-15px);}
      }
      @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
        40% {transform: translateY(-30px);}
        60% {transform: translateY(-15px);}
      }
      .bounce {
        -webkit-animation-name: bounce;
        animation-name: bounce;
      }
    </style>
  </head>
  <body>
    <div id="animated-example" class="animated bounce"></div>
    <button onclick="myFunction()">पेज रीलोड करें</button>
    <script>
      function myFunction() {
        location.reload();
      }
    </script>
  </body>
</html>

व्याख्या: बाउंस एनिमेशन: एलिमेंट अपनी मूल स्थिति (0%) पर शुरू होता है, ऊपर उछलता है (-30px पर 40%), थोड़ा नीचे आता है (-15px पर 60%), और वापस मूल स्थिति पर आ जाता है। अवधि केवल 1s है।