बाउंस एनिमेशन इफेक्ट का उपयोग तत्व को हिट करने के बाद सतह से जल्दी ऊपर, पीछे या दूर ले जाने के लिए किया जाता है।
उदाहरण
आप बाउंस एनिमेशन प्रभाव को लागू करने के लिए निम्न कोड को चलाने का प्रयास कर सकते हैं -
<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>