このウェブサイトはどのようにページ読み込みアニメーションを行いますか？

Question

http://visualidiot.com/articles/hacking-facebook

このウェブサイトの記事に行くと、ページの本体が滑り落ちるアニメーションをしてから少し上になることがわかります。ページの本体がアニメーション化され、ヘッダーはアニメーション化されません。以前はページの読み込みアニメーションを見たときに、バグに悩まされ、戻るボタンを押してページに戻ったときにうんざりしていました。

この男はどのようにしてアニメーションを行いますか？

Answer 1

私はVisual Idiotです。私は、よく、私のサイトを作った人です。これは、その後のように使用することができ、アニメーションを定義

@-webkit-keyframes bounce { 
    0% { opacity: 0; -webkit-transform: translateY(-800px); } 
    60% { opacity: 1; -webkit-transform: translateY(25px); } 
    80% { -webkit-transform: translateY(-8px); opacity: .8; } 
    100% { -webkit-transform: translateY(0); opacity: 1; } 
} 

：基本的に

、セスのが言ったように、それはanimations.cssですべてだ、とは、より具体的には、それは物事を成し遂げるためにキーフレームアニメーションを使用していますそう：何がそれに追加「バウンス」のクラスを持っている時はいつでも

.bounce { 
    -webkit-animation: bounce .75s ease-in-out; 
} 

さて、それはかわいい効果のページを自分のサイトに持っていることをやります。注意すべきことは、DOMを準備する前にアニメーションを実行することがあるため、Javascriptを使用してクラスを追加したほうが効果的です（長いページのみ）。

もっと知りたい場合CSSのキーフレームアニメーションについては、Dan Edenの驚くべき点をチェックしてみてください。animate.css library私はソースファイルを引き離すことから多くを学んだ。