CODEWITHSUNDEEP
jqueryloopsbounce
Katie
Katie

Reputation: 11

How to make an image bounce continuously jQuery

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.

Upvotes: 1

Views: 1537

Answers (1)

R. Schifini
R. Schifini

Reputation: 9313

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

Upvotes: 1

Related Questions