CSS3トランジションアニメーションがロードされていますか？

https://stackoverflow.com/questions/6805482

25-10-2019
|

質問

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

これは私が望むもののようなものですが、ページのロード：

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

私がこれまでに見つけたもの

CSS3トランジションデレイ, 、要素への影響を遅らせる方法。ホバーでのみ動作します。
CSS3キーフレーム, 、負荷で動作しますが、非常に遅いです。そのため有用ではありません。
CSS3遷移十分に速いですが、ページの読み込みでアニメーション化しないでください。

解決

君は できる 実行します 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が言わなければならないことです。

他のヒント

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です。

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

だから私はボディテキストを白からページのロードで白いテキストの色にフェードイン（サイトの背景と同じ）にフェードインしたいと思っていました。しかし、JSをまだ知らないでください - だからここに私のためにうまくいった私のコードがあります。

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

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

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

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

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

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

デフォルトでは、CSS/DOMは、CSSが使用するためのいかなる種類の「ロード」状態を提供しません。あなたが望んでいた/JavaScriptを使用できた場合、あなたはクラスをに割り当てるでしょう body またはいくつかのCSSを活性化する何か。

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

私たちは、「閉じる」であるという仮定で動作しています。

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

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

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

CSS Sytle "Fadein"が @Rolfごとに定義され、移行を定義し、不透明度を初期状態に設定する（つまり0）

唯一のキャッチは、これがスパン要素やdiv要素で動作しないことです。

マウスが画面上で最初に動くときに開始するよりも、ボディのホバーで開始します。これは、到着後にほとんど1秒以内にあります。ここでの問題は、画面外に逆転することです。

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

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

全画面表示： http://jsfiddle.net/favlx/embedded/result/

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

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

私は2つのCSSスタイルのシートを作成しました。1つ目は、アニメーションの前にHTMLのスタイルを整えたい方法です... 2つ目は、ページがアニメーションの面倒を見る方法です。

私はこれをどのように達成したかを完全には理解していませんが、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ファイルに直接スキップする必要があるため、問題はないはずです。

私は、この方法がどのように検索エンジンに優しいかについての意見を知りたいと思っています。私の黒い帽子をかぶって、私はページをキーワードで記入し、その不透明さに9999Sの遅延を適用できると思います。

検索エンジンがTransition-Delay属性をどのように扱うか、そして上記の方法を使用して、ページにリンクや情報が表示されるかどうかを知りたいと思います。

さらに重要なことは、ページがロードされるたびにこれが一貫していない理由と、これを修正する方法を本当に知りたいのです。

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

他の誰かが一度に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つのトランジション宣言を使用しようとし続け、（実際にはそうではない）両方を使用しようとした理由を知らない。

3秒の遅延があるCSS

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

1回の呼び出しで複数のアニメーション
aを作成します待つ実際のアニメーション（私たちの場合の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; }
}

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

さらに、たとえば何かをフェードしたい場合は、配信されるコンテンツを隠すCSSが必要になります。ユーザーがCSS3の移行を持っていない場合、彼らはそれを見ることができません。

jquery（使いやすい +他のUASにアニメーションを追加することをお勧めします）を使用することをお勧めします。

$(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の代わりにアニメートを簡単に使用できるという利点があります。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow