เอฟเฟกต์ Bounce Animation ด้วย CSS

Bounce Animation effect ใช้ทำให้อีเลเมนต์เคลื่อนที่เร็วขึ้น กลับ หรือ ห่างจากพื้นผิวหลังชน

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อนำ bounce animation effect ไปใช้:

<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>.