这个body fadeIn动画是怎么做的？

【问题标题】：How is this body fadeIn animation done?这个body fadeIn动画是怎么做的？
【发布时间】：2013-02-26 16:32:26
【问题描述】：

我发现了“http://thegoodman.cc/”。这是一个非常棒的网站。

我只是真的很好奇，至于这个文档的正文是如何稍微淡入的，并在这个页面中向上滑动：

http://thegoodman.cc/about/

【问题讨论】：

标签： javascript jquery css animation css-animations

【解决方案1】：

这是使用 CSS 动画完成的。查看the source，你会发现这行代码：

.sup {
    animation:sup 1.8s backwards;
}
@keyframes sup {
    0% {
        opacity:0;
        transform:translateY(50px);
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:1;
        transform:translateY(0);
    }
}

它将淡入文本（使用opacity）并使用translateY 将其向上移动。

JSFiddle example.

注意它使用Prefix Free JS 库来避免必须添加诸如-webkit-、-moz- 等前缀。

【讨论】：

没问题 - 很高兴为您提供帮助。如果它满足您的需求，请不要忘记接受此答案。