jquery - 仅使用 CSS 制作箭头动画

Question

如果您检查Toshiba's website ，有一个带有移动箭头的小鼠标图标。显然，他们的动画是这样的:

function iconTop() {
$(".icon_tween").animate({
    opacity: 0,
    marginTop: "15px"
}, 1e3, function () {
    $(".icon_tween").css({
        marginTop: 0,
        opacity: 1
    }), iconTop()
})
}

..是否可以仅使用 CSS 制作完全相同的动画？

Answer 1

您还可以使用 translate 代替 margin top，这样它会更独立于您的元素布局并且性能更高。

@-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