使用CSS3实现滚动动画

Question

使用CSS3实现滚动动画

19

有没有一种使用CSS3实现滚动动画的方法？

像这样的效果？

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

如何在CSS中指定动画的起始点？

- Spiff

不行，因为在CSS中甚至没有滚动无动画的选项。 - noob

你能澄清一下你所说的“动画滚动”是什么意思吗？滚动虽然平凡，但也是一种动画形式。你如何进一步地为它添加动画效果呢？ - Anthony

@Micha 你说得对，即使没有动画我也做不了。 - Spiff

@Anthony 假设你现在在一个TextArea的最上方，你想要将其（在你的代码中）滚动到底部。如果没有动画，它会直接跳到底部。使用动画会使过程更加平滑。以iPhone为例思考。 - Spiff

5个回答

9

CSS3动画只与CSS属性一起工作。这在CSS的限制范围内是不可能的。

- David Wick

4

我发现了一种更好的滚动动画方式，即使用JavaScript来转换文档主体。使用translate而不是margin或position进行动画的优势已经得到了很好的记录。归根结底，当动画元素时，GPU总是会做得更好。

以下是一个例子，它计算用户当前位置距离窗口顶部的距离，然后平滑地向上移动到窗口顶部。假设用户点击或触摸事件触发了backToTop函数。

在这里查看实际效果：https://antibland.github.io/starting_point/

function whichTransitionEvent() {
  var t,
      el          = document.createElement('fakeelement'),
      transitions = {
        'transition':'transitionend',
        'OTransition':'oTransitionEnd',
        'MozTransition':'transitionend',
        'WebkitTransition':'webkitTransitionEnd'
     };

  for (t in transitions){
    if (el.style[t] !== undefined){
      return transitions[t];
    }
  }
}

function backToTop() {
  var pos_from_top  = window.scrollY,
      transitionend = whichTransitionEvent(),
      body          = document.querySelector("body");

  function scrollEndHandler() {
    window.scrollTo(0, 0);
    body.removeAttribute("style");
    body.removeEventListener(transitionend, scrollEndHandler);
  }

  body.style.overflowY = "scroll";
  window.scrollTop = 0;

  body.style.webkitTransition = 'all .5s ease';
  body.style.transition = 'all .5s ease';

  body.style.webkitTransform = "translateY(" + pos_from_top + "px)";
  body.style.transform = "translateY(" + pos_from_top + "px)";

  transitionend && body.addEventListener(transitionend, scrollEndHandler);
}

- Andy Hoffman

不要被点赞搞混了，使用transform而不是margin-top可以显著提高性能！ - Adi Darachi

0

这是我制作的一个非常简单的 .js 函数，用于动画和滚动网页。

var Current_scroll_Y=0;
var Target_scroll_Y=0;
var scroll_Speed = 15;

function animate_Scroll(Y)
{
  Target_scroll_Y = Y;
  screen_Y = Math.floor(window.scrollY);

  //Scroll Down
  if(screen_Y<Y)
  {
    var myWindowScroll = setInterval(function(){ screen_Y = screen_Y+scroll_Speed;  if(screen_Y>=Target_scroll_Y){ clearInterval(myWindowScroll); return;}    window.scrollTo(0, screen_Y); }, 3);   
  }
  //Scroll Up
  if(screen_Y>Y)
  {
    var myWindowScroll = setInterval(function(){ screen_Y = screen_Y-scroll_Speed;  if(screen_Y<=Target_scroll_Y){ clearInterval(myWindowScroll); return;}    window.scrollTo(0, screen_Y); }, 3);  
  } 


}//End animate_Scroll

- Really Nice Code

0

我认为这在CSS3中不可能实现，但如果我正确理解了您的问题，使用jQuery非常容易。

请查看：

http://demos.flesler.com/jquery/scrollTo/

http://api.jquery.com/scroll/

- Connor

1

谢谢你的回答。我知道可以用 JQuery 来实现。 - Spiff

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mente · Accepted Answer

如此处所解释的那样，您可以使用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 提供了一个基于这个想法的不错的工作示例