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 · Accepted 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_

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

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

_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

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   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   lt div class  ball  gt  lt  div gt  x000D   x000D   x000D

[css] CSS smooth bounce animation

Examples related to css

Examples related to css-animations