这个身体如何消失在动画中完成？

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