使用CSS3动画滚动

Question

有没有办法用CSS3动画滚动？

像这样的东西？

@-webkit-keyframes scrolltoview
{
    0%   { scrollTop: 0; }
    100% { scrollTop: 30%; }
}

如何把css放在动画的起点？

Answer 1

如此处所述,您可以使用margin-top技巧并动态更新滚动位置.你可以查看演示.代码很简单:

// Define the variables
var easing, e, pos;
$(function(){
  // Get the click event
  $("#go-top").on("click", function(){
    // Get the scroll pos
    pos= $(window).scrollTop();
    // Set the body top margin
    $("body").css({
      "margin-top": -pos+"px",
      "overflow-y": "scroll", // This property is posed for fix the blink of the window width change 
    });
    // Make the scroll handle on the position 0
    $(window).scrollTop(0);
    // Add the transition property to the body element
    $("body").css("transition", "all 1s ease");
    // Apply the scroll effects
    $("body").css("margin-top", "0");
    // Wait until the transition end
    $("body").on("webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd", function(){
      // Remove the transition property
      $("body").css("transition", "none");
    });
  });
});

@AndrewP 基于这个想法提供了一个很好的工作示例

Answer 2

css3动画仅适用于css属性.这在css的范围内是不可能的.