Question

http://visualidiot.com/articles/hacking-facebook

访问本网站上的任何文章，你会看到页面的主体做了一个动画，它向下滑动，然后向上滑动一点。页面的主体动画，标题没有。当我以前看过页面加载动画时，它们一直受到错误的困扰，当按下后退按钮并返回页面时会搞乱。

这家伙究竟是怎么做的？

Answer 1

我是视觉白痴，那个制作的人，我的网站。

基本上，正如Seth所说的那样，它全部出现在animations.css中，更具体地说，它使用关键帧动画来完成任务：

@-webkit-keyframes bounce {
    0% { opacity: 0; -webkit-transform: translateY(-800px); }
    60% { opacity: 1; -webkit-transform: translateY(25px); }
    80% { -webkit-transform: translateY(-8px); opacity: .8; }
    100% { -webkit-transform: translateY(0); opacity: 1; }
}

这定义了一个动画，然后可以这样使用：

.bounce {
    -webkit-animation: bounce .75s ease-in-out;
}

现在，只要有任何类型的“反弹”添加到它，它就会在我的网站上显示可爱的小效果页面。但有一点需要注意：如果你通过Javascript添加类似乎更好（虽然只在较长的页面上），因为它有时会在DOM准备好之前运行动画，

如果您想了解有关CSS中关键帧动画的更多信息，我建议您查看Dan Eden的惊人animate.css library。我从拉开源文件中学到了很多东西。

这个网站如何进行页面加载动画？

1 个答案: