Animate arrows with CSS only

css, jquery, jquery-animate

Solution

You can also use `translate` instead of margin top, so that it would be more independent of your element layout and more performant.

@-webkit-keyframes arrow-jump {
  0%   { opacity: 0;}
  100% { opacity: 1; 
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px);
    }  
}
#arrow {
  -webkit-animation: arrow-jump 1s infinite;
  -moz-animation:    arrow-jump 1s infinite
  -o-animation:      arrow-jump 1s infinite;
  animation:         arrow-jump 1s infinite;
}

demo

Problem

If you check the Toshiba's website, there's a small mouse icon with moving arrows. Apparently, they're animating it like so: ``` function iconTop() { $(".icon_tween").animate({ opacity: 0, marginTop: "15px" }, 1e3, function () { $(".icon_tween").css({ marginTop: 0, opacity: 1 }), iconTop() }) } ``` .. is it possible to animate exactly the same with CSS only?

Original source