How to create bouncing div animation
You can do it manually, frame-by-frame using CSS
or you can probably automate it with SCSS
with a bit of math and iteration.
body{ overflow:hidden; }
.ball{
--size: 50px;
--bounceHeight: 120px;
--duration: .4s;
width: var(--size);
height: var(--size);
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
perspective: 1000px;
}
/* bouncing */
.ball::before{
content: '';
display: block;
width: inherit;
height: inherit;
background: radial-gradient(ellipse at 30% 20%, LightSalmon, transparent 40%),
radial-gradient(circle at -20% -30%, tomato 60%, darkred);
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,.1) inset;
animation: bounce var(--duration) infinite alternate cubic-bezier(1,0,.8,.9);
}
/* shadow */
.ball::after{
content: '';
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
right: 0;
display: block;
width: inherit;
height: 20%;
color: #CCC;
background-color: currentColor;
border-radius: 50%;
transform: translateY(var(--bounceHeight)) scale(.8);
animation: bounceShadow var(--duration) infinite alternate cubic-bezier(1,0,.8,.9);
}
@keyframes bounce {
85% { transform: translateY(calc(var(--bounceHeight) - 3px)); }
86% { transform: translateY(calc(var(--bounceHeight) - 3px)) scale(1.1, .9); }
100% { transform: translateY(var(--bounceHeight)) scale(1.4, .5); }
}
@keyframes bounceShadow {
0% { box-shadow: 0 0 10px 8px currentColor; color:#EEE; }
90% { box-shadow: 0 0 3px 3px currentColor; }
91% { box-shadow: 0 0 2px 2px currentColor; }
100% { box-shadow: 0 0 0px currentColor; }
}
<div class="ball"></div>
ð¡ A much more elaborate demo can be seen here
PURE CSS way to do this bounce
Do like this.
.bounce {
position:fixed;
left:50%;
bottom:0;
margin-top:-25px;
margin-left:-25px;
height:50px;
width:50px;
background:red;
-webkit-animation:bounce 1s infinite;
}
@-webkit-keyframes bounce {
0% { bottom:5px; }
25%, 75% { bottom:15px; }
50% { bottom:20px; }
100% {bottom:0;}
}
<div class="bounce"></div>
body {
background: black;
}
.arrow {
position: fixed;
bottom: 0;
left: 50%;
margin-left:-20px;
width: 40px;
height: 40px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
background-size: contain;
}
.bounce {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
/* Scroll down indicator (bouncing) */
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0); }
40% {
-webkit-transform: translateY(-30px); }
60% {
-webkit-transform: translateY(-15px); } }
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0); }
40% {
-moz-transform: translateY(-30px); }
60% {
-moz-transform: translateY(-15px); } }
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
40% {
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-o-transform: translateY(-30px);
transform: translateY(-30px); }
60% {
-webkit-transform: translateY(-15px);
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-o-transform: translateY(-15px);
transform: translateY(-15px); } }
<body>
<div class="arrow bounce">
</div>
</body>