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

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

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

[css] CSS smooth bounce animation

Examples related to css

Examples related to css-animations