bounce effect

by rajnishw3

HTML

<div class="ball"></div>

CSS

.ball{
	width: 50px;
	height: 50px;
	margin: auto;
	background-color: red;
	border-radius: 50%;
	position: absolute;
	top: 10px; 
	left: 0;
	right: 0;
	animation: bounce 1s infinite; 
}

@keyframes bounce {
    0%   { transform: translateY(6px); }
    5%   { transform: translateY(8px); }
    10%  { transform: translateY(12px); }
    15%  { transform: translateY(20px); }
    20%  { transform: translateY(38px); }
    25%  { transform: translateY(72px); }
    30%  { transform: translateY(100px); }
    35%  { transform: translateY(152px); }
    40%  { transform: translateY(154px) scale(1.1, .9); }
    50%  { transform: translateY(176px) scale(1.4, .6); }
    55%  { transform: translateY(162px) scale(1.2, .8); }
    60%  { transform: translateY(138px) scale(1.05, .95); }
    65%  { transform: translateY(110px); }
    70%  { transform: translateY(72px); }
    75%  { transform: translateY(38px); }
    80%  { transform: translateY(20px); }
    85%  { transform: translateY(12px); }
    90%  { transform: translateY(8px); }
    95%  { transform: translateY(5px); }
    100% { transform: translateY(5px); }
}