問題タブ [css-animations]

CSS3 アニメーションを使用して div を拡大しようとしています。ただし、divの上部をそのままにしておきたいです。したがって、divの下部のみを拡大したいと思います。どうすればいいですか？

Treahouse の Web サイトとツリーで揺れるサイン エフェクトを見て以来、それを再現しようと試みてきました。

でも揺れません。

これは JS Fiddleのデモです。

私もそれを改造してみました。

しかし、それもうまくいきません。JS Fiddle でそのデモを参照してください。

私は現在、Safari の非常に苛立たしいバグと戦っています。

イベントをトリガーするほとんどの要素 (ただし、すべてではなく、差別化要因を見分けることはできません) により、遷移focusまたはアニメーション化されたページ上のすべての要素が、上部と左側に ~2px ジャンプするようです。これは、ページが読み込まれた後の最初のフォーカス イベントでのみ発生します。

バグはdroplr.comのログイン部分にあるため、少し面倒です。JSFiddleの単純なケースを完全に抽出することはできませんでした。

アカウントを持っている/作成してログインしている場合は、この編集アイコンをクリックしてドロップします。

ページの最初の焦点であることがわかります。これは、ページに 1 つのドロップがあり、問題のある要素にフォーカスをトリガーしたときのタイムラインです。

より多くのドロップを使用しても、ほぼ同じですが、約40個のペイントが最大になるようです. また、プロファイラーは悪意のあることを何も示唆していません。jQuery の内部を簡単に説明します。

translate3dまたはを介し​​て要素をレイアウトする代わりに、matix3d単純に and を使用するtopとleft、このバグはなくなります。これを何時間もデバッグした後、私は完全に途方に暮れています。

誰かが似たようなものを見たことがあること、見てみることができること、または次のステップのデバッグについてアドバイスをくれることを願っています.

本当にありがとう！

更新: Dave Desandroは、それが 3D アクセラレーションの開始であると示唆したので、代わりに を使用して試してみましたが、translate確かに、ジッターは発生しませんでした。focusただし、ハードウェアアクセラレーションがイベントで起動する理由はわかりませんが、一度だけです。

ページの読み込み時に transformZ を 0 に設定してハードウェアを強化しようとしましたが、うまくいきませんでした。これ以上のアイデアは大歓迎です。

css アニメーションには -webkit-animation の省略形があることを知っています。

アニメーション コードの短縮形を使用できます。

しかし、私の実験では -moz-animation が機能しなかったようです。本当？

わかりましたので、タブを前後にスライド/展開し、滑らかに見えるアニメーションメニューを作成しています。クリックしたタブにアタッチしている animationend イベントのバインドを解除する以外は、すべて機能しています。ほとんどの場合、タブをクリックすると、アニメーションの最後にリスナーがアタッチされ、次のタブをクリックすると、リスナーを以前にクリックしたタブにバインド解除したいと考えています。しかし、何らかの理由で .off 関数を起動できません。ここに私のコードがあります

オフイベントが発生しない理由について何か考えはありますか?

===更新===

テンプレートから削除the style="display: none;して、以下で推奨されている方法を適用すると、他のリスト項目をクリックすると空のコンテナが起動します。他に何ができますか？

jQuery と JSON を使用して実行時に動的に作成される ul リストがあります (インライン HTML の使用はテンプレートです)。ユーザーがリスト項目 (#navItem) をクリックしたときに背景の CSS スタイルを変更する必要があります。インライン クラスから .appentTo() など、月の下で考えられるすべてを試しました。以下にあるものは、ハードコードされた要素に対しては正常に機能しますが、動的に読み込まれたコンテンツでは何も機能しないようです。さらに紛らわしいのは、li タグ内の要素のクラスが開始することです...???

どんな助けでも大歓迎です。以下は私のコードスニペットです。サンクス。

HTML:

これは、DOM にデータをリストとして挿入する関数です。

ユーザーが項目をクリックしたときに (その項目でのみ) 発生する必要がある CSS:

li アイテムに与えられた Class 属性:

ホバーすると1つのリンクコンテナが展開するリンクリストを作成しています（詳細、画像、説明付き）。CSSトランジションやアニメーションでアニメーション化するのに問題はありません。

問題は、マウスが離れた後も展開したままにしたいということです。そして、javascriptなしでやりたいです。

それは可能ですか？ありがとう！

だから私は3つの画像をゆっくりと重ね合わせてフェードしようとしています. ここでこのチュートリアルに従っています。しかし、何らかの理由で、私の画像は互いにフェードアウトするのが速すぎて、タイミングをうまく制御できません。

これが私のプレビューページです。鳥、トマト、ボートが見られるはずですが、今はすべてが重なり合ってボートに乗ってしまいます。

Demo 1 と Demo 3 をフォローしていますが、アニメーションがオフになっている理由はありますか? 前もって感謝します！:)

私の jsfiddle: http://jsfiddle.net/leongaban/TPjWG/

コード：

私には2つの背景があります：

nemo.png background左右から無限に移動するが影響を与えないようにするにはどうすればよいocean.png backgroundですか？

編集：彼が右端に到達すると（そして画像が表示されなくなると）、彼は再び左端から現れ、左から右へのドリフトを開始します。

私はCSSアニメーションを作成するためにCSS3を使用しています。私はrotateXを使って画像を回転させています。回転ポイントがどこにあるかを正確に確認できるように、何らかの方法で原点の位置をマークしたいと思います。

-webkit-transform-origin の位置をマークするにはどうすればよいですか? CSS や JavaScript など、あらゆるソリューションを受け入れます。