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.

.animated {    -webkit-animation-duration: 2.5s;    animation-duration: 2.5s;    -webkit-animation-fill-mode: both;    animation-fill-mode: both;    -webkit-animation-timing-function: linear;    animation-timing-function: linear;    animation-iteration-count: infinite;    -webkit-animation-iteration-count: infinite;  }     @-webkit-keyframes bounce {    0%, 20%, 40%, 60%, 80%, 100% {-webkit-transform: translateY(0);}    50% {-webkit-transform: translateY(-5px);}  }     @keyframes bounce {     0%, 20%, 40%, 60%, 80%, 100% {transform: translateY(0);}    50% {transform: translateY(-5px);}  }     .bounce {     -webkit-animation-name: bounce;    animation-name: bounce;  }    #animated-example {      width: 20px;      height: 20px;      background-color: red;      position: relative;      top: 100px;      left: 100px;      border-radius: 50%;  }    hr {      position: relative;      top: 92px;      left: -300px;      width: 200px;  }

<div id="animated-example" class="animated bounce"></div>  <hr>

Now, my only problem is the bouncing element takes a longer rest before it starts bouncing again. How can I make it bounce smoothly just like the bounce effect we get by using jQuery.animate?

Answer 1

The long rest in between is due to your keyframe settings. Your current keyframe rules mean that the actual bounce happens only between 40% - 60% of the animation duration (that is, between 1s - 1.5s mark of the animation). Remove those rules and maybe even reduce the animation-duration to suit your needs.

.animated {    -webkit-animation-duration: .5s;    animation-duration: .5s;    -webkit-animation-fill-mode: both;    animation-fill-mode: both;    -webkit-animation-timing-function: linear;    animation-timing-function: linear;    animation-iteration-count: infinite;    -webkit-animation-iteration-count: infinite;  }  @-webkit-keyframes bounce {    0%, 100% {      -webkit-transform: translateY(0);    }    50% {      -webkit-transform: translateY(-5px);    }  }  @keyframes bounce {    0%, 100% {      transform: translateY(0);    }    50% {      transform: translateY(-5px);    }  }  .bounce {    -webkit-animation-name: bounce;    animation-name: bounce;  }  #animated-example {    width: 20px;    height: 20px;    background-color: red;    position: relative;    top: 100px;    left: 100px;    border-radius: 50%;  }  hr {    position: relative;    top: 92px;    left: -300px;    width: 200px;  }

<div id="animated-example" class="animated bounce"></div>  <hr>

---

Here is how your original keyframe settings would be interpreted by the browser:

• At 0% (that is, at 0s or start of animation) - translate by 0px in Y axis.
• At 20% (that is, at 0.5s of animation) - translate by 0px in Y axis.
• At 40% (that is, at 1s of animation) - translate by 0px in Y axis.
• At 50% (that is, at 1.25s of animation) - translate by 5px in Y axis. This results in a gradual upward movement.
• At 60% (that is, at 1.5s of animation) - translate by 0px in Y axis. This results in a gradual downward movement.
• At 80% (that is, at 2s of animation) - translate by 0px in Y axis.
• At 100% (that is, at 2.5s or end of animation) - translate by 0px in Y axis.