[解決済み] ページロード時のフェードイン効果にCSSを使用する
質問
CSSのトランジションを使って、ページロード時にテキストの段落をフェードインさせることができますか?
での見え方がとても好きでした。 http://dotmailapp.com/ で、CSSを使った同様の効果をぜひ使ってみたい。このドメインはその後購入され、言及された効果はなくなりました。アーカイブされたものを見ることができます。 ウェイバックマシンにて .
イラストレーション
このマークアップを持つこと。
<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;
}
ロード時にトランジションを発生させるには?
どのように解決するのですか?
方法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; }
}
デモ
ブラウザ対応
すべてのモダンブラウザと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";
デモ
ブラウザ対応
すべてのモダンブラウザとInternet Explorer 10(およびそれ以降)に対応しています。 http://caniuse.com/#feat=css-transitions
方法3:
または、その方法を .メール を使用します。
jQuery
$("#test p").delay(1000).animate({ opacity: 1 }, 700);
CSS
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
}
デモ
ブラウザ対応
jQuery 1.x
: すべてのモダンブラウザとInternet Explorer 6(およびそれ以降)。
http://jquery.com/browser-support/
jQuery 2.x
: すべてのモダンブラウザとInternet Explorer 9(およびそれ以降)。
http://jquery.com/browser-support/
この方法は、ターゲットブラウザが CSS 3 の遷移をサポートする必要がないため、最もクロスコンパチブルな方法です。 または アニメーションを使用します。
関連
-
[css3]ピュアCSS3でdivのinとoutの効果を順番に実現する
-
[css3]Apple携帯電話のロック解除のためのCSS3サンプルフォントシャインエフェクト
-
[css3]赤いパケットのジッター効果を実現するCSS3
-
[CSSチュートリアル]ドラッグ&ドロップ効果を実現するピュアCSSコード
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] 最初の要素にクラスを指定するCSSセレクタ
-
[解決済み] CSSコンテンツによるHTMLエンティティの追加
-
[解決済み] CSSだけでリンクを無効化する方法
-
[解決済み】CSSを使用して、すべてのブラウザでdiv要素を垂直方向に中央に配置するにはどうすればよいですか?
-
[解決済み】CSSでclassにワイルドカード*を使用する場合
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】純粋なCSSでWebページの内容をコピーできないようにする方法
-
[CSSチュートリアル】CSS3Animationで実現する簡単な指のクリックアニメーションの例
-
[CSSチュートリアル】overflow:hiddenの役割を解説(overflow hidden、clear float、外周マージンの崩れを解決する)。
-
[CSSチュートリアル】CSSのシングルDivの描画スキル
-
[CSSチュートリアル】height:100%と書いても効かない理由
-
[CSSチュートリアル]cssの位置固定コードで左右2重の位置決め
-
[css3] scss変数の値を実行時に変更するcss3 var()の使用方法を説明します。
-
[css3]Apple携帯電話のロック解除のためのCSS3サンプルフォントシャインエフェクト
-
[CSSチュートリアル】背景画像画面の適応的な実装を実現するCSS
-
[解決済み] CSS 3で点滅/フラッシュするテキストを作成する方法