javascript - この体のフェードイン アニメーションはどのように行われますか?

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 の例。

などのプレフィックスを追加する必要がないように、 Prefix Free JS ライブラリを使用していることに注意してください。-webkit--moz-