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    x000D   x000D   animated   x000D    -webkit-animation-duration  2 5s  x000D    animation-duration  2 5s  x000D    -webkit-animation-fill-mode  both  x000D    animation-fill-mode  both  x000D    -webkit-animation-timing-function  linear  x000D    animation-timing-function  linear  x000D    animation-iteration-count  infinite  x000D    -webkit-animation-iteration-count  infinite  x000D     x000D   x000D   -webkit-keyframes bounce   x000D    0   20   40   60   80   100   -webkit-transform  translateY 0    x000D    50   -webkit-transform  translateY -5px    x000D     x000D   x000D   keyframes bounce    x000D    0   20   40   60   80   100   transform  translateY 0    x000D    50   transform  translateY -5px    x000D     x000D   x000D   bounce    x000D    -webkit-animation-name  bounce  x000D    animation-name  bounce  x000D    x000D   x000D   animated-example   x000D      width  20px  x000D      height  20px  x000D      background-color  red  x000D      position  relative  x000D      top  100px  x000D      left  100px  x000D      border-radius  50   x000D    x000D   x000D  hr   x000D      position  relative  x000D      top  92px  x000D      left  -300px  x000D      width  200px  x000D    x000D   lt div id  animated-example  class  animated bounce  gt  lt  div gt  x000D   lt hr gt  x000D   x000D   x000D    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

User · Answer

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:

We set an animation. This is a short hand for animation properties.
We immediately start the animation since we use from and to in the keyframes. from is = 0% and to is = 100%
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.

_x000D_

.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_

User · Answer

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    x000D   x000D   animated   x000D    -webkit-animation-duration   5s  x000D    animation-duration   5s  x000D    -webkit-animation-fill-mode  both  x000D    animation-fill-mode  both  x000D    -webkit-animation-timing-function  linear  x000D    animation-timing-function  linear  x000D    animation-iteration-count  infinite  x000D    -webkit-animation-iteration-count  infinite  x000D    x000D   -webkit-keyframes bounce   x000D    0   100    x000D      -webkit-transform  translateY 0   x000D      x000D    50    x000D      -webkit-transform  translateY -5px   x000D      x000D    x000D   keyframes bounce   x000D    0   100    x000D      transform  translateY 0   x000D      x000D    50    x000D      transform  translateY -5px   x000D      x000D    x000D   bounce   x000D    -webkit-animation-name  bounce  x000D    animation-name  bounce  x000D    x000D   animated-example   x000D    width  20px  x000D    height  20px  x000D    background-color  red  x000D    position  relative  x000D    top  100px  x000D    left  100px  x000D    border-radius  50   x000D    x000D  hr   x000D    position  relative  x000D    top  92px  x000D    left  -300px  x000D    width  200px  x000D    x000D   lt div id  animated-example  class  animated bounce  gt  lt  div gt  x000D   lt hr gt  x000D   x000D   x000D      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

User · Answer

In case you re already using the transform property for positioning your element  as I currently am   you can also animate the top margin    ball     animation  bounce 1s infinite alternate    -webkit-animation  bounce 1s infinite alternate      keyframes bounce     from       margin-top  0        to       margin-top  -15px

[css] CSS smooth bounce animation

Examples related to css

Examples related to css-animations