web-dev-qa-db-ja.com

ロード上のCSS3遷移アニメーション？

Javascriptを使用せずにページロードでCSS3トランジションアニメーションを使用することは可能ですか？

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

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

これまでに見つけたもの

  • CSS3 transition-delay 、要素への影響を遅らせる方法。ホバーにのみ機能します。
  • CSS3キーフレーム はロード時に動作しますが、極端に遅いです。そのため役に立ちません。
  • CSS3のトランジション は十分速いですが、ページの読み込み時にアニメーション化しないでください。
csscss3webkitcss-transitionscss-animations
160
Jens Törnell

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

...これは基本的に「最初はヘッダーが画面の左端から全幅ずれていて、最後は正しい位置にあります」と言っています。

第二部はその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の言うことです

388
Chris Spittles

ごくわずかな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';">

必要なのはJavaScriptだけです。

24
Rolf

ページの 'on.load'で始まるトランジションではなく、OPの質問に対するある種の回避策を見つけたと思います。不透明度のフェードインにアニメーションを使用しても同じ効果があることがわかりました。 OPと同じもの。

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

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

そして何らかの理由で、これは.classのみではうまくいきません#idのみ（少なくとも私のものではありません）

これが助けになることを願っています - 私が知っているように、このサイトは私に大いに役立ちます！

19
Lee John

ええ、これはトリッキーなものです。

答えは「本当に」ではありません。

CSSは機能層ではありません。何がいつ起こるかについては何も認識していません。それは単にpresentationalレイヤを異なる "flags"（クラス、ID、状態）に追加するために使われます。

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

言われていること、あなたはそのためのハックを作成することができます。ここで例を挙げますが、それはあなたの状況には当てはまるかもしれないし当てはまらないかもしれません。

私たちは "close"が "十分に良い"という仮定に基づいて操作しています。

<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は最後にアクティブになります。

5
foxy

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

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

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

全画面： http://jsfiddle.net/faVLX/embedded/result/

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

1
beardhatcode

@ Rolfの解決策と似ていますが、外部関数への参照やクラスでのプレーをスキップします。不透明度がロードされた後に1に固定されたままであることであるならば、単にスタイルによって直接不透明度を変えるためにインラインスクリプトを使います。例えば

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

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

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

1
user3907296

わかりました私はページがCSSトランジションだけを使用してロードするときアニメーションを達成することに成功しました（一種の！）：

2つのCSSスタイルシートを作成しました。1つはHTMLのアニメーション前のスタイル設定、もう1つはアニメーションの実行後のページの外観です。

私はこれを達成した方法を完全には理解していませんが、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属性をどのように扱うか、そして上記の方法を使用してそれらがページ上のリンクと情報さえ見ることができるかどうかを知りたいと思うでしょう。

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

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

0
Michael Walkling