Here is code not using the percentage in the keyframes. Because you used percentages the animation does nothing a long time.
How does this example work:
animation
. This is a short hand for animation properties.from
and to
in the keyframes. from is = 0% and to is = 100%animation: bounce 1s infinite alternate;
the 1s is how long the animation will last..ball {_x000D_
margin-top: 50px;_x000D_
border-radius: 50%;_x000D_
width: 50px;_x000D_
height: 50px;_x000D_
background-color: cornflowerblue;_x000D_
border: 2px solid #999;_x000D_
animation: bounce 1s infinite alternate;_x000D_
-webkit-animation: bounce 1s infinite alternate;_x000D_
}_x000D_
@keyframes bounce {_x000D_
from {_x000D_
transform: translateY(0px);_x000D_
}_x000D_
to {_x000D_
transform: translateY(-15px);_x000D_
}_x000D_
}_x000D_
@-webkit-keyframes bounce {_x000D_
from {_x000D_
transform: translateY(0px);_x000D_
}_x000D_
to {_x000D_
transform: translateY(-15px);_x000D_
}_x000D_
}
_x000D_
<div class="ball"></div>
_x000D_