CSS Bounce In Down bounce animation effect
CSS Bounce In Down Bounce Animation Effect
Description
The bounce animation effect is used to quickly move an element upward, backward, or away from a surface after impact.
Syntax
@keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
60% {
opacity: 1;
transform: translateY(30px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
Parameters
- Transform − Transforms apply to 2D and 3D transformations of an element.
-
Opacity − Opacity applies to an element to achieve a semi-transparent effect.
Example
<html>
<head>
<style>
.animated {
background-image: url(https://geek-docs.com/static/https://coder-cafe.com/wp-content/uploads/2025/09/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 bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
}
}
@keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
60% {
opacity: 1;
transform: translateY(30px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated bounceInDown"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
Output
It will produce the following result −
