237

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

これは私が望むもののようなものですが、ページの読み込み時:

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

これまでに見つけたもの

  • CSS3 transition-delay、要素への影響を遅らせる方法。ホバー時のみ動作します。
  • CSS3 Keyframeはロード時に動作しますが、非常に遅いです。そのせいで役に立たない。
  • CSS3 トランジションは十分に高速ですが、ページの読み込み時にアニメーション化されません。
4

13 に答える 13

543

JavaScript を使用しなくても、ページの読み込み時にCSSアニメーションを実行できます。CSS3 Keyframesを使用するだけです。

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

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

...基本的には、「最初に、ヘッダーは画面の左端から全幅で外れ、最後には所定の位置に配置されます」と述べています。

slideInFromLeft2 番目の部分は、そのアニメーションを呼び出しています。

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 の意見は次のとおりです。

于 2012-09-28T10:59:09.400 に答える
35

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 なし」という質問は知っていますが、1 行の Javascript を使用する簡単な解決策があることを指摘する価値があると思います。

次のようなインライン Javascript の場合もあります。

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

必要な JavaScript はこれだけです。

于 2013-07-07T00:49:41.407 に答える
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 が最後にアクティブ化されます。

于 2011-07-24T07:25:26.133 に答える
1

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

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

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

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

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

于 2011-07-24T07:42:45.127 に答える
0

わかりました、CSSトランジションのみを使用してページがロードされたときにアニメーションを実現することができました(一種!):

私は 2 つの CSS スタイル シートを作成しました。

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

これを Firefox、Safari、Opera でテストしました。アニメーションが機能することもあれば、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 属性をどのように処理するか、また、上記の方法を使用してページ上のリンクや情報が表示されるかどうかを知りたいです。

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

他に何もないとしても、これがいくつかの見解や意見を生み出すことができることを願っています!

于 2012-07-18T20:32:29.860 に答える
-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 を簡単に使用できるという利点があります。

于 2011-07-24T07:38:39.457 に答える