这个身体是如何在动画中完成的？

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-等前缀。