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

CSSトランジションを使って、ページロード時にテキストパラグラフをフェードインさせることはできますか？

http://dotmailapp.com/][1]での見栄えがとても気に入っているので、CSSを使って同じような効果を使いたいと思っています。このドメインはすでに購入されており、前述のような効果はありません。アーカイブされたコピーは[on the Wayback Machine]1で見ることができます。

イラスト

このマークアップを持つ

<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;
}​

ロード時にトランジションを発生させるには？

Peter Mortensen
編集された質問 25日 9月 2019 в 5:20
プログラミング
css opacity css-transitions
26日 7月 2012 в 11:36
26 ビュー
ソリューション

Method 1:

もしあなたが自分自身を刺激するようなトランジションを探しているなら、[CSS 3 Animations][1]を使うべきです。これらはサポートされていませんが、まさにこのような目的のために作られました。

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;
}

Plain 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のトランジション*やアニメーションに対応している必要がないため、最も相互互換性に優れています。

[1]： https://developer.mozilla.org/en-US/docs/Web/CSS/animation

Peter Mortensen
編集した答え 25日 9月 2019 в 5:16
解説 (15)

onload=""`のHTML属性を使い、JavaScriptで要素の不透明度のスタイルを調整することができます。

CSSは提案通りにしてください。HTMLコードを編集して


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

**読み込み完了時にページ全体をフェードインさせることもできます。

HTMLです。

CSSです。

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

W3Schools]1のサイトをご覧ください。transitionsや、change styles with JavaScriptの記事をご覧ください。

Peter Mortensen
編集した答え 25日 9月 2019 в 5:20
解説 (1)

@A.M.K'さんの「jQueryを使わずにトランジションを行う方法」という質問にお答えします。非常に簡単な例を作ってみました。もう少し考える時間があれば、JavaScriptのコードを完全になくすことができるかもしれません。


    body {
        background-color: red;
        transition: background-color 2s ease-in;
    }


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


    <p>test</p>
Peter Mortensen
編集した答え 25日 9月 2019 в 5:18
解説 (0)