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

Question

我发现了“http://thegoodman.cc/”。这是一个绝对令人惊叹的网站。

我真的很好奇，这个文档的正文是如何稍微淡入，然后在这个页面向上滑动的:

http://thegoodman.cc/about/

Answer 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- 等