这个网站如何做页面加载动画？ [关闭]答案

【问题标题】：how does this website do the page load animation? [closed]这个网站如何做页面加载动画？ [关闭]
【发布时间】：2012-01-21 17:19:12
【问题描述】：

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

转到本网站上的任何文章，您会看到页面的主体会在向下滑动然后向上滑动的位置播放动画。页面的主体动画，页眉没有。当我之前看到页面加载动画时，它们一直被错误所困扰，在点击返回按钮并返回页面时会出现混乱。

这家伙到底是怎么做那个动画的？

【问题讨论】：

看起来很明显但是......为什么不直接问他呢？他的页面说他在 Twitter 上。
我什至没有想到... 额头咂舌

标签： animation css pageload

【解决方案1】：

我是 Visual Idiot，是我的网站的创建者。

基本上，正如 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。我从拆分源文件中学到了很多东西。

【讨论】：

啊，非常感谢。我只是喜欢你的网站设计，如此简单却......美丽。动画，就像它的设置方式一样，很漂亮。