仅使用CSS制作箭头动画

Question

如果你查看东芝的网站,那里有一个带有移动箭头的小鼠标图标.显然,他们是这样的动画:

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;
}

演示