How to make an image bounce continuously jQuery

Question

I have an image that needs to "bounce" up and down continuously on window load, like the scroll image at the top of this page: http://www.complex.com/pop-culture/zendaya-interview-2015-cover-story

I do not want to use jQuery ui. I need the image to complete one animation (animate down 20px) and then perform the next (animate up 20px) on loop. I can't seem to figure out 1) the two-step animation and 2) looping that animation.

Might want to try this: https://daneden.github.io/animate.css/ — Zach P, Mar 03 '16 at 01:52

score 1 · Answer 1 · answered Mar 03 '16 at 02:09

1

Try using css like this:

@keyframes example {
    0%   {margin-top: 0px;}
    50%  {margin-top: 20px;}
    100% {margin-top: 0px;}
}

div{
  display: inline-block;
  border: 1px solid black;
  animation-name: example;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

See JFiddle

answered Mar 03 '16 at 02:09

R. Schifini

9,085
2
26
32

1

the animation is smoother if you use translateY -- https://jsfiddle.net/e5eamncx/ -- up voted your A – Tasos Mar 03 '16 at 02:40
Thank you @Tasos, you are right about translateY() being smoother. – R. Schifini Mar 03 '16 at 02:57

How to make an image bounce continuously jQuery

1 Answers1