CSSを使用したページ読み込み時のフェードイン効果

442

CSSトランジションを使用して、ページの読み込み時にテキスト段落をフェードインできますか？

私はそれがhttp://dotmailapp.com/でどのように見えるか本当に気に入っており、CSSを使用して同様の効果を使用したいと思います。このドメインは購入されており、言及された効果はありません。アーカイブされたコピーは、Wayback Machineで表示できます。

図

このマークアップがある：

<div id="test">
    <p>This is a test</p>
</div>

次のCSSルールの場合：

#test p {
    opacity: 0;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}

ロード時に遷移をトリガーするにはどうすればよいですか？

css css-transitions opacity

— ユーザー1556266
ソース

これを読むことをお勧めします：bavotasan.com/2011/a-simple-fade-with-css3

— Edwin Bautista

またはこの：css-tricks.com/snippets/css/...

— raksheetbhat

回答:

914

方法1：

自己起動トランジションを探している場合は、CSS 3アニメーションを使用する必要があります。それらもサポートされていませんが、これはまさにそのために作られたものです。

CSS

#test p {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

デモ

http://jsfiddle.net/SO_AMK/VV2ek/

ブラウザのサポート

すべての最新のブラウザーとInternet Explorer 10（およびそれ以降）：http : //caniuse.com/#feat=css-animation

方法2：

または、jQuery（またはプレーンJavaScript、3番目のコードブロックを参照）を使用して、ロード時にクラスを変更することもできます。

jQuery

$("#test p").addClass("load");

CSS

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;

    -webkit-transition: opacity 2s ease-in;
       -moz-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
         -o-transition: opacity 2s ease-in;
            transition: opacity 2s ease-in;
}

#test p.load {
    opacity: 1;
}

プレーンJavaScript（デモにはありません）

document.getElementById("test").children[0].className += " load";

デモ

http://jsfiddle.net/SO_AMK/a9dnW/

ブラウザのサポート

すべての最新のブラウザーとInternet Explorer 10（およびそれ以降）：http : //caniuse.com/#feat=css-transitions

方法3：

または、.Mailが使用する方法を使用できます。

jQuery

$("#test p").delay(1000).animate({ opacity: 1 }, 700);

CSS

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;
}

デモ

http://jsfiddle.net/SO_AMK/a9dnW/3/

ブラウザのサポート

jQuery 1.x：すべての最新のブラウザとInternet Explorer 6以降：http : //jquery.com/browser-support/
jQuery 2.x：すべての最新のブラウザとInternet Explorer 9（以降）：http：// jquery.com/browser-support/

ターゲットブラウザはCSS 3のトランジションまたはアニメーションをサポートする必要がないため、この方法は最も互換性があります。

— AMK
ソース

149

CSS3アニメーションは、最近のすべてのブラウザーで問題なくサポートされています。もちろん、IEは最新のブラウザではありません。

— Rob

はい。ただし、IE6との下位互換性を維持する必要がある場合はどうなりますか？その場合、jQueryが最良のオプションだと思います。しかし、質問者はCSSでそれを望んでいるので、代替として投稿しました。

— AMK、

JavaScriptで初期不透明度を0に設定するのが最善ではありませんか？これにより、ユーザーがJavaScriptを無効にしている場合、要素は表示されず、その場所にのみ存在します。

— ジョナサン。

@AMK私はJavaScriptだけで「修正」しようとしましたが、どうにかできなかったので、最終的にはを使用して別個のcssファイルを作成opacity: 1 !important;し、<noscript>要素に挿入しました。

— ジョナサン。

素晴らしい答え！アニメーションを$("#test p").addClass("load");複数回適用するのはどれほど難しいですか？こう$("#test p").removeClass('load').addClass("load");アニメーションがすでに停止しているので、仕事をしていません。JavaScriptから再起動をトリガーできますか？

— Șerban Ghiță 2015年

あなたは使用することができますonload=""HTML属性をし、あなたの要素の不透明度のスタイルを調整するためにJavaScriptを使用しています。

提案したとおりにCSSを残します。HTMLコードを次のように編集します。

<body onload="document.getElementById(test).style.opacity='1'">
    <div id="test">
        <p>This is a test</p>
    </div>
</body>

これは、読み込みが完了したときにページ全体をフェードインするようにも機能します。

HTML：

<body onload="document.body.style.opacity='1'">
</body>

CSS：

body{ 
    opacity: 0;
    transition: opacity 2s;
    -webkit-transition: opacity 2s; /* Safari */
}

W3Schoolsの Webサイトを確認してください：トランジションとJavaScriptでスタイルを変更するための記事。

— ネッド
ソース

すばらしい答えです。あるいは、要素に直接onloadを設定できると思います。のように<div id="test" onload="this.style.opacity='1'">。ボディ全体がロードされる前にイベントがトリガーされるかどうかはわかりません。

— Jeppe

jQueryなしで遷移を行う方法についての@AMKの質問への回答。私が一緒に投げた非常に簡単な例。これについてさらに検討する時間があれば、JavaScriptコードを完全に排除できるかもしれません。

<style>
    body {
        background-color: red;
        transition: background-color 2s ease-in;
    }
</style>

<script>
    window.onload = function() {
        document.body.style.backgroundColor = '#00f';
    }
</script>

<body>
    <p>test</p>
</body>

— ロブ
ソース