ロード時のcss3遷移アニメーション？

195

JavaScriptを使用せずに、ページの読み込み時にCSS3遷移アニメーションを使用することは可能ですか？

これは私が望むものの一種ですが、ページの読み込み時に：

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

これまでに見つけたもの

  • CSS3 transition-delay、要素への影響を遅延させる方法。ホバーでのみ機能します。
  • CSS3 Keyframe、ロード時に機能しますが、非常に遅いです。そのため役に立たない。
  • CSS3の移行は十分高速ですが、ページの読み込み時にアニメーション化しません。
css  webkit  css-transitions  css-animations 
— イェンス・テルネル
ソース
@blesh：ほとんどすべて-たとえば、mysociety.org / 2011/08/11
— operators
2
キーフレームはこれを実現し、CSS3アニメーションがサポートされていない場合に最適なフォールバックを提供します。なぜ遅いと思いますか？
— zachleat
こんにちは！リンクは現在壊れており、どこに行くつもりだったのかわからないので、誰かが修正してください！
— Linux4Life531

回答:

458

あなたはできる実行CSSの任意のJavaScriptを使用せずに、ページの読み込みにアニメーションを。CSS3キーフレームを使用するだけです。

例を見てみましょう...

CSS3のみを使用してナビゲーションメニューを所定の位置にスライドさせるデモを次に示します。

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}
<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>
スニペットを展開

壊して...

ここで重要な部分は、私たちが呼ぶキーフレームアニメーションslideInFromLeftです...

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

...基本的には、「最初に、ヘッダーは画面の左端から全幅分だけ離れ、最後に配置されます」と表示されます。

2番目の部分は、そのslideInFromLeftアニメーションを呼び出すことです。

animation: 1s ease-out 0s 1 slideInFromLeft;

上記は簡略版ですが、ここでは明確にするために詳細版を示します。

animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */

コンテンツをスライドさせたり、エリアに注意を引いたりするなど、あらゆる種類の興味深いことを行うことができます。

W3Cの意見は次のとおりです。

— クリス・スピトルズ
ソース
20
これがページの読み込み時に実行されるのはなぜですか？
— Rolf
2
上記の質問に答えるために、デフォルトでは、アニメーションは適用後0秒で開始され、遅延はありません。これを制御するために設定できる追加のプロパティ、animation-delayがあります。参照：w3.org/TR/css3-animations/#animation-delay-property
— Michael Davis
2
ドキュメントの読み込み後にアニメーションが確実に開始されるようにするには、アニメーションコードをbody要素の下のスタイルシートまたはbody要素の下部にあるスタイルタグに配置します。
— TaylorMac、2016年
@SuzanneEdelmanCreoconcept私の知識では、IE9は遷移プロパティをサポートしていません。あなたのオプションはJSまたは優雅な低下です。
— Chris Spittles
1
素晴らしい答え、2019年に私を助けてくれました！
— Gosi
28

Javascriptはほとんど必要ありません。

window.onload = function() {
    document.body.className += " loaded";
}

ここでCSS：

.fadein {
    opacity: 0;
    -moz-transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;
    transition: opacity 1.5s;
}

body.loaded .fadein {
    opacity: 1;
}

「JavaScriptなしで」という質問は知っていますが、Javascriptの1行を含む簡単な解決策があることを指摘する価値があると思います。

それはそのようなもののようなインラインJavaScriptでさえありえます：

<body onload="document.body.className += ' loaded';" class="fadein">

これが必要なJavaScriptのすべてです。

— ロルフ
ソース
2
少し修正：<body onload = "document.body.setAttribute（ 'class'、 'loaded'）">
— Ivan
1
ページのonLoadイベントを待つ必要がない場合は、次のコードを</ body>タグの前に挿入します。<script type = "text / javascript"> document.body.setAttribute（ 'class'、 'loaded'）; </ script>
— イヴァン、
7
既存の上書きを回避するにはbody、クラスを使用しますdocument.body.classList.add('loaded)
— ヴャチェスラフCotruta
1
私が見つかりましたdocument.body.className += " loaded";ため、わずかに少ない冗長であることを追加しloaded、既存のクラスにクラスを。
— Pim Schaaf
1
@PimSchaafあなたの提案をありがとう、それは完全に理にかなっています。今から編集します。最近では、もう少しエレガントな（ただし互換性は低い）classListを使用することもできます。
— ロルフ
20

私はOPの質問に対して一種の回避策を見つけたと思います-ページの「on.load」で始まる遷移の代わりに-不透明度のフェードインにアニメーションを使用しても同じ効果があることがわかりました（私は探していましたOPと同じです）。

したがって、ページの読み込み時に本文のテキストを白（サイトの背景と同じ）から黒のテキストの色にフェードインさせたいと思っていました。月曜日からコーディングしているだけなので、on.loadスタイルのコードを探していました。 JSはまだわかりません。これが、私にとってうまく機能した私のコードです。 

#main p {
  animation: fadein 2s;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

そして、どんな理由であれ、これは（少なくとも私のものでは）.classだけでは機能しません#id

これがお役に立てば幸いです-私が知っているように、このサイトは私をたくさん助けてくれます！

— リー・ジョン
ソース
6

まあ、これはトリッキーです。

答えは「本当ではない」です。

CSSは機能的なレイヤーではありません。何がいつ発生するかについての認識はありません。単にプレゼンテーションを追加するために使用されます層をさまざまな「フラグ」（クラス、ID、状態）ます。

デフォルトでは、CSS / DOMはCSSが使用する「ロード中」の状態を提供しません。JavaScriptを使用したい/使用できた場合は、bodyCSSをアクティブにするためにクラスまたは何かを割り当てます。

そうは言っても、そのためのハックを作成することができます。ここでは例を示しますが、状況によっては当てはまらない場合もあります。

「閉じる」が「十分」であるという前提で操作しています。

<html>
<head>
<!-- Reference your CSS here... -->
</head>
<body>
    <!-- A whole bunch of HTML here... -->
    <div class="onLoad">OMG, I've loaded !</div>
</body>
</html>

次に、CSSスタイルシートの抜粋を示します。

.onLoad
{
    -webkit-animation:bounceIn 2s;
}

また、最新のブラウザーは段階的にレンダリングするため、最後の要素が最後にレンダリングされ、このCSSが最後にアクティブ化されると想定しています。

— フォクシー
ソース
1

@Rolfのソリューションに似ていますが、外部関数への参照やクラスでの再生をスキップします。ロード後に不透明度を1に固定する場合は、インラインスクリプトを使用して、スタイルを介して不透明度を直接変更します。例えば

<body class="fadein" onload="this.style.opacity=1">

ここで、CSSスタイル "fadein"は@Rolfごとに定義され、遷移を定義し、不透明度を初期状態（つまり0）に設定します

唯一の問題は、onloadイベントが機能していないため、SPANまたはDIV要素では機能しないことです。

— user3907296
ソース
1

マウスを画面上で最初に動かしたときに開始します。ほとんどの場合、到着後1秒以内に開始します。ここでの問題は、画面の外にあるときに反転することです。

html:hover #animateelementid, body:hover #animateelementid {rotate ....}

それは私が考えることができる最高のものです：http : //jsfiddle.net/faVLX/

フルスクリーン：http : //jsfiddle.net/faVLX/embedded/result/

編集以下のコメントを参照してください：
ホバーがないため、これはどのタッチスクリーンデバイスでも機能しません。したがって、ユーザーがコンテンツをタップしない限り、コンテンツは表示されません。–リッチブラッドショー

— ひげ帽子コード
ソース
はい、私はそれを自分で理解しました。他に何も機能しない場合は、問題ありません。そのために1票賛成。
— JensTörnell、2011
13
これはひどい考えです。どのタッチスクリーンデバイスにもホバーがないので、ユーザーはコンテンツをタップしない限りコンテンツを表示できません。
— リッチブラッドショー
1

CSSは3秒の遅延のみ

ここで取るいくつかのポイント：

  • 1回の呼び出しで複数のアニメーション
  • 実際のアニメーション（この場合は2番目のアニメーション）を遅延させるだけの待機アニメーションを作成します。

コード：

header {
    animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
}

@keyframes wait {
    from { transform: translateY(20px); }
    to { transform: translateY(20px); }
}

@keyframes slideInFromBottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
— クラウディウ
ソース
0

OK、CSSトランジションのみを使用してページが読み込まれたときにアニメーションを実現できました（一種の！）：

2つのcssスタイルシートを作成しました。1つはアニメーションの前にHTMLスタイルを設定する方法で、もう1つはアニメーションの実行後にページをどのように表示するかです。

私はこれをどのように達成したのか完全に理解していませんが、次のように2つのcssファイル（両方ともドキュメントの先頭にあります）がjavascriptで区切られている場合にのみ機能します。

私はこれをFirefox、サファリ、オペラでテストしました。アニメーションが機能する場合もあれば、2番目のcssファイルに直接スキップする場合もあれば、ページがロードされているように見えるが何も表示されない場合もあります（おそらく私だけですか？）

<link media="screen,projection" type="text/css" href="first-css-file.css"  rel="stylesheet" />

<script language="javascript" type="text/javascript" src="../js/jQuery JavaScript Library v1.3.2.js"></script>

<script type='text/javascript'>
$(document).ready(function(){

// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/iPad/i))) {
$(".container .menu-text").click(function(){  // Update class to point at the head of the list
});
}
});
</script>

<link media="screen,projection" type="text/css" href="second-css-file.css"  rel="stylesheet" />

ここに私の進行中のウェブサイトへのリンクがあります： 。http //www.hankins-design.co.uk/beta2/test/index.html

多分私は間違っているかもしれませんが、CSSトランジションをサポートしていないブラウザは、遅延や継続時間なしに2番目のCSSファイルに直接スキップする必要があるため、問題はないはずだと思いました。

この方法が検索エンジンにとってどのように友好的であるかについての見解に興味があります。黒い帽子をかぶったまま、ページにキーワードを入力して、その不透明度に9999秒の遅延を適用できると思います。

検索エンジンがtransition-delay属性をどのように処理するか、また、上記の方法を使用して、ページ上のリンクや情報を表示するかどうかに興味があります。

さらに重要なのは、ページが読み込まれるたびにこれが一貫しない理由と、これを修正する方法を知りたいです。

これが他に何もなければ、いくつかの見解や意見を生み出すことを願っています！

— マイケル・ウォークリング
ソース
0

他の誰かが一度に2つのトランジションを実行する際に問題が発生した場合は、次のようにします。ページの読み込み時に上から下に来るテキストが必要でした。

HTML 

<body class="existing-class-name" onload="document.body.classList.add('loaded')">

HTML 

<div class="image-wrapper">
    <img src="db-image.jpg" alt="db-image-name">
    <span class="text-over-image">DB text</span>
</div>

CSS 

.text-over-image {
    position: absolute;
    background-color: rgba(110, 186, 115, 0.8);
    color: #eee;
    left: 0;
    width: 100%;
    padding: 10px;
    opacity: 0;
    bottom: 100%;
    -webkit-transition: opacity 2s, bottom 2s;
    -moz-transition: opacity 2s, bottom 2s;
    -o-transition: opacity 2s, bottom 2s;
    transition: opacity 2s, bottom 2s;
}

body.loaded .text-over-image {
    bottom: 0;
    opacity: 1;
}

なぜ1つのセレクターで2つの遷移宣言を使用しようとし、（実際にはではないが）両方を使用すると考えたのかわからない。

— s3c
ソース
0

より単純な解決策（まだ[1行インライン] JavaScriptを使用）：

注：bodyタグとしてこれを使用するbody.か、this.私のために動作しませんでした。長いだけ; （Linux Chromium）のquerySelector使用を許可するclassList.remove

<body class="onload" onload="document.querySelector('body').classList.remove('onload')">

この行を他のCSSルールの上に追加します。

body.onload *{ transform: none !important; }

これは、不透明度を遷移トリガーとして使用するだけで、不透明度に適用できることに注意してください（OP [他のポスター]によって要求されます）。（同じ方法で他のcssルーリングでも機能する可能性があり、トリガー間の明示的な遅延のために複数のクラスを使用できます）

ロジックは同じです。変換を強制しない（ドキュメントの:none !importantすべての子要素でbody.onload、ドキュメントがロードされたら、クラスを削除して、CSSで指定されているすべての要素ですべての遷移をトリガーします。

以下の最初の回答（短い回答については、上記の編集を参照してください）

これは逆の解決策です：

  1. HTMLレイアウトを作成し、CSSを最終的な結果に応じて（必要なすべての変換を使用して）設定します。
  2. 遷移プロパティを好みに設定します
  3. ロード後に変換する要素にクラス（例：waitload）を追加します。CSSキーワード！importantここでは、が。
  4. ドキュメントがロードされたら、JSを使用して要素からクラスを削除し、変換を開始します（および遷移を削除します：オーバーライドなし）。

複数の要素の複数の遷移で動作します。ブラウザ間の互換性を試しませんでした。

#rotated{
    transform : rotate(90deg) /* any other transformation */;
    transition  3s;
}
#translated{
    transform : translate(90px) /* any other transformation */;
    transition  3s;
}
.waitload{
    transform: none !important;
}
<div id='rotated' class='waitload'>
    rotate after load
</div>
<div id='translated' class='waitload'>
    trasnlate after load
</div>
<script type="text/javascript">
     // or body onload ?
    [...document.querySelectorAll('.waitload')]
        .map(e => e.classList.remove('waitload'));

</script>
— ルイス・ルードグ・トロティエ
ソース
-2

CSSはできるだけ早く適用されるため、実際にはそうではありませんが、要素はまだ描画されていない可能性があります。1秒または2秒の遅延を推測できますが、インターネットの速度によっては、ほとんどの人にとってこれは正しく見えません。

さらに、たとえば何かをフェードインしたい場合、配信されるコンテンツを非表示にするCSSが必要になります。ユーザーがCSS3トランジションを持っていない場合、ユーザーはそれを見ることはありません。

jQuery（使いやすさのため+他のUAにアニメーションを追加したい場合があります）と次のようなJSを使用することをお勧めします。 

$(document).ready(function() {
    $('#id_to_fade_in')
        .css({"opacity":0})   // Set to 0 as soon as possible – may result in flicker, but it's not hidden for users with no JS (Googlebot for instance!)
        .delay(200)           // Wait for a bit so the user notices it fade in
        .css({"opacity":1});  // Fade it back in. Swap css for animate in legacy browsers if required.
});

CSSに追加された遷移とともに。これには、必要に応じて、レガシーブラウザで2番目のCSSの代わりにanimateを簡単に使用できるという利点があります。

— リッチブラッドショー
ソース
17
なぜこの答えが受け入れられたのですか？それは質問が要求したことを実際には何もしません。それは単純に（そして非常に迅速に、時には目立たないように）要素を非表示にし、ほんの一瞬（200ミリ秒）待ってから、即座に再び表示します。それはフェードではない、最後にチェックした。
— VoidKing
あなたはにcssトランジションを含めますが、#id_to_fade in私は同意しますが、それは答えから明確ではありません。
— リッチブラッドショー
のように、別の.css（{transition： 'opacity 2s'}）をjQuery呼び出しに追加しますか？それともあなたのCSSだけですか？私はこれが愚かな質問だと思うつもりです...
— VoidKing
3
それは大丈夫です-私は本当にデモを置くべきでした。CSSでは、#id_to_fade_in { -webkit-transition:opacity 0.5s ease-in-out; }+ -o-、-moz-プレフィックスも同様です。
— リッチブラッドショー
2
これは受け入れるべき答えではないはずです。キーフレームを使用するのが良い方法です。
— Eduardo Naveda 2014年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.