問題タブ [css-transitions]

Apple.com の伸縮性のある検索ボックスをフォーカスして再作成しようとしています。私はそれを機能させましたが、私のものは背景画像を伸ばし、虫眼鏡が伸びずに縫い目が優雅に追加されるようにします。また、ある背景を別の背景にフェードさせることもできました。

ここに私のCSSがあります

実装については、http://www.golfbrowser.com/を参照してください。

何らかの理由で CSS トランジションを機能させることができないようです。これは非常に単純な間違いだと確信しています。しかし、私は今、1時間頭を壁にぶつけています。Windows 7 64 ビットで mozilla firefox 4.0.1 を使用しています。

私は現在、CSS トランジションを作成/管理するための jQuery プラグインを作成していますが、transition-duration でこの奇妙な動作を見つけました。

どうやら、トランジションの実行中は、トランジション中のプロパティが異なる値を受け取っていない限り、duration プロパティへの変更は無視されます。デュレーション自体によってトランジションが変化することはありません。

以下は、この例を示すコードです。以下は、私が達成しようとしている遷移動作をよりよく理解するための jsFiddle へのリンクです。

• jsFiddle 1 - CSS 期間の問題: http://jsfiddle.net/danro/Kd58j/

• jsFiddle 2 - jQuery を使用した望ましい効果: http://jsfiddle.net/danro/xPwc4/

更新された期間を受け入れるように遷移を強制する方法についてのアイデアはありますか?

アップデート

この動作は仕様で定義されているようですが、誰かが回避策を持っている場合は、まだ回避策があります。

(www.w3.org/TR/css3-transitions/#starting より)

プロパティの遷移が開始されると、「transition-timing-function」、「transition-duration」、または「transition-delay」プロパティが変更された場合でも、元のタイミング関数、期間、および遅延に基づいて実行を継続する必要があります。移行が完了する前に。

ここで奇妙な問題があります:http://alarmefast.com/securitasdirect2011/index.php

左上隅には、CSS3 トランジションを使用してホバー時に回転するように設定した をdisplay:block;含むように設定されたリンクがあります。<span>奇妙な点は、指差しとして表示されるカーソルと競合しているように見えることです。

理由はありますか？

ありがとう。

編集: OSX で Chrome 12 ベータ版を使用しています。小さな手が表示され、アニメーションが完了すると消えます。

私は最近CSS3についてたくさん勉強していて、たくさんの不要な機能や効果を使って楽しみのためだけにデザインを作成しました。ここにあります：

http://wendyhenrichs.com/could/

上部のナビゲーションバーを見ると、リンクにカーソルを合わせると、スムーズなトランジションモーションで右に7ピクセル移動することがわかります。

ただし、マウスをリンクから外すと、すぐに元の位置に戻ります。

以前に移動したように、スムーズな動きで元の位置にフェードバックさせる方法はありますか？

css3トランジションの使用に問題があります。トランジションをスムーズにするにはどうすればよいですか。すぐに表示されます。divボックス
にカーソルを合わせると、その高さがゆっくりと変化します。

HTMLコード

jsfiddle

私は現在、CSS トランジションをかなり頻繁に使用していますが、イーズイン、イーズアウトなどにしかアクセスできないことに制限を感じています。ベジエ曲線オプションはほとんどの制御を可能にしているように見えますが、これでも実際のイージング式を指定することはできません。弾性イージングなどをシミュレートします.別のオプションはありますか、またはこのタイプのアニメーションを実行するにはjavascriptに頼る必要がありますか?

サイトでいくつかの Webkit トランジションを試しているところ、iOS デバイスで問題が発生しました。毎秒ランダムな回転が与えられている6つの画像があります。トランジションは 6 つの画像のうち 5 つでは正常に機能しますが、何らかの理由で iPad または iPhone を使用すると、トランジション中に 6 番目の画像が消えます。

サンプルはこちらでご覧いただけます。

CSS:

Javascript:

当初はメモリの問題だと思っていましたが、その 1 つの画像を除くすべてのトランジションを削除しても違いはありません。なぜこれが起こっているのかについてのアイデアはありますか?

CSS3 transitions, transforms and animations are wonderful. They are even more now more browsers do support them.

Still there's one thing I keep asking myself: Why isn't the spec definining that CSS3 transitions and animations should handle height:auto?

It doesn't make any sense when we're moving away from fixed layouts with things like the CSS3 flexible box model and media queries.

It doesn't make any sense to use JavaScript just to set a CSS transition with a fixed height.

Now comes my question:

Will the W3C ever specify that height:auto should be supported for CSS3 transitions and animations or can we request them to specify this?

Webkit トランジションの position:relative 要素を左に移動するのに大きな問題があります。動作するはずですが、動作しません。jQuery を介してクラスが追加され、有効になります。

おそらくフィドルが役立つかもしれませんhttp://jsfiddle.net/4WmJz/1/

何か案は？

素晴らしい