問題タブ [css-animations]

CSS3を使用したアニメーション/トランジションについて学習していますが、このコードではトランジションが機能しません...なぜですか？

HTML：

CSS：

http://jsfiddle.net/LLRfN/

以前この質問をしましたが、明確かどうかわかりません。それ以来、大量のトラブルシューティングを行ってきましたが、役に立ちませんでした。それで、私は助けを求めて実況で戻ってきました。

1. ドキュメントの準備ができたら、JS を使用して、画像を非表示にするクラスを削除し、オブジェクトを動かすように設定する logoAnim を追加します。

2. オブジェクトは、同時の scaleY(2) 効果 (にじみ/滴り効果) とともにドロップインする必要があります。

Firefox/Moz 経由の JSFiddle リンクで正しい効果を確認できますが、Chrome/Webkit では機能しません。FF の Firebug コードを見ると、「-moz-animation:2s ease 2s normal none 1 ooze」が「.logoAnim」の CSS に表示されますが、Chrome の Webkit バージョンには表示されません。

何か不足していますか？css の構造/順序は webkit で重要ですか?

http://jsfiddle.net/AfDwu/5/

生成されたコンテンツの::beforeと::afterを関連付けた要素をアニメーション化すると、以前は負のzインデックスが付けられていた生成されたコンテンツが、元の要素よりも高いインデックスになっているように見えます。これはChrome、Safari、Firefoxで見られます。

私はそれが紛らわしいことを知っているので、ここにフィドルがあります。

私が間違っている、またはバグに遭遇した場合のアイデアはありますか？

アニメーション化する@-webkit-keyframeのセットがある要素があります。ページの読み込み時に、これらのキーフレームが実行され、イントロは見栄えがします。

次に、ホバーに@ -webkit-keyframeの2番目のセットがあり、繰り返すように設定しているので、ホバーすると、その要素にループアニメーションがあります。それもうまくいきます。

ただし、マウスを要素から離すとすぐに、最初の（イントロ）キーフレームのセットが再び実行されます。最初に実行した後に実行したくありません。CSSでこれを防ぐ簡単な方法はありますか？

私が持っているものの最小限の例

また、1500以上の評判を持つ人がタグを編集して、webkit-animationタグを追加できますか？まだ作成されていないなんて信じられない…：\

回転アニメーションでは、Chromeで機能しますが、Firefoxでは機能しません。なんで？

http://jsfiddle.net/WsWWY/

Every time I visit a page with CSS3 animations, my notebook becomes noisy (gives me a signal that it does some heavy job on there). I wouldn't care myself if at least resulting animations were smooth enough. But they are not. What I get as a result on my 2.4 GHz Core 2 Duo with 8GB of RAM and dedicated NVIDIA GeForce 320M (not much, but should be enough for some css, no?...) is some jerky, randomly flickering, in some cases having weird artifacts... "animation", that is often worse then it's JS equivalent...

Has anyone done any comparisons of JS vs CSS animations? Or benchmarking of proposed CSS3 goodies for real-world usage (for example how many of them can be on the page simultaneously without serious hang, etc)? Are there any best practices (like - do this, do not do that, or your browser will crawl - and such)?

http://jsfiddle.net/cD4Gr/1/

これは私のアニメーションコードです:

現在、div は上部にスライドするのではなく、上部から自動的に開始されます。アニメーション化する唯一のものは不透明度です。

http://jsfiddle.net/cD4Gr/4/

ルコード：

インスペクターを見ると、要素がページの上部にある場合でも、下部の値は0であると表示されます。

どういうわけか、アニメーションを逆に再生する必要がありますか？または別のアニメーションを再生しますか？（上位％ではなく下位％を使用）

ホバーすると無期限に回転する要素があります。ホバーアウトすると、アニメーションが停止します。単純：

ただし、ホバーアウトすると、アニメーションが突然停止し、0 度に戻ります。アニメーションを元の位置に戻したいのですが、構文がわかりません。

どんな入力でも素晴らしいでしょう！

私はここでいくつかの重いCSS3のものを試していますが、解決できることを願っているいくつかの問題に遭遇しています：

1-ページを読み込むときにスライドするボックスがあります。まあ言ってみれば：

ただし、私のメディアクエリでは、サイズ変更のため、これを次のように変更する必要があります。

アニメーション名を同じに保ち、@ mediaクエリの1つでキーフレームを再定義するだけでよいと思いましたが、これは機能していないようです。なんで？（はい、適切なプレフィックスが設定されています）

2-上記の私の解決策は、サイズごとに異なるアニメーションを定義することです。

ただし、サイトのサイズを変更すると、メディアクエリの1つにヒットすると、アニメーションが最初からやり直されます。アニメーションを1回だけ再生したいのですが（サイズに関係なく、後でサイズを変更しても）、それだけです。したがって、＃1の解決策がない限り、これはクエリが検出されたときにCSSを「再開始」するためだと思います。