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

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

注意它的使用无前缀 JS库,以防止不必增加比如前缀-webkit-,-moz-等等.