這個身體如何消失在動畫中完成？

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