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

Question

我发现了“ http://thegoodman.cc/ ”。这是一个绝对了不起的网站。

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

http://thegoodman.cc/about/

Answer 1

它是使用 CSS 动画完成的。查看源代码时，您会发现这行代码：

.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 示例。

请注意，它使用Prefix Free JS 库来防止必须添加诸如-webkit-等前缀-moz-。