Hiệu ứng Bounce (Nảy) với CSS Animation

Hiệu ứng Bounce làm phần tử nảy nhanh lên, xuống, hoặc xa khỏi bề mặt sau khi va chạm.

Ví dụ

Thử chạy mã sau để triển khai bounce animation:

<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()">Reload page</button>
  <script>
    function myFunction() { location.reload(); }
  </script>
</body>
</html>