CSS smooth bounce animation

Question

I needed to implement infinite bounce effect using pure CSS, so I referred this site and ended up doing this.

Answer 1

Here is code not using the percentage in the keyframes. Because you used percentages the animation does nothing a long time.

• 0% translate 0px
• 20% translate 0px
• etc.

How does this example work:

1. We set an animation. This is a short hand for animation properties.
2. We immediately start the animation since we use from and to in the keyframes. from is = 0% and to is = 100%
3. We can now control how fast it will bounce by setting the animation time: animation: bounce 1s infinite alternate; the 1s is how long the animation will last.

.ball {
  margin-top: 50px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: cornflowerblue;
  border: 2px solid #999;
  animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;
}
@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}