Animate arrows with CSS only

Question

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?

Answer 1

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