問題タブ [css-animations]

cssトランジションを追加してから（最初のトランジションはホバー、2番目はアニメーション）、フォントがめちゃくちゃになっているようで、「異なって」見えます。

それは完全に奇妙で、私は何時間も探しましたが、何も見つかりませんでした。また、なぜそれが起こっているのかを正確に理解することもできません。

Firefoxでは問題ないようですが、サファリとクロームに問題があります。

http://www.simplerweb.co.uk

左下の歯車のアニメーションの下にあるものはすべて、フォントの太さが軽いように見え、ナビゲーションメニューも同じように見えます。

私はこれで完全に迷子になっています。

これがアニメーションのCSSです。

最新のChromev18（再インストール）を使用して別のPCで表示するまで、ホバーでギアを正常に回転させたと思いました。回転中にギアの一部がブランクになっているようです。

エラーimg- http://dl.dropbox.com/u/67891839/gear.png

コード-http://jsfiddle.net/seanjacob/JHwC7/

理由がわからない場合でも、Chromeで機能している場合はコメントしてください。

Knockout.js と CSS3 Animations を使用して、iPad 用の「WebApp」を構築しています。

異なるページ間の遷移はアニメーション化されています。アニメーションが終了したときに JavaScript コールバックを取得したい。

これで、次のように Javascript を使用してコールバックをキャッチできることがわかりました。

しかし、これを行うより良い方法はありませんか？「ノックアウト方式」？data-bindJavaScript コードで DOM 要素にアクセスするのではなく、DOMの属性を使用してコールバック関数をバインドしたい!

何か案は？

編集:多分私は Knockout.js に慣れていないことを追加する必要があります.仕方！

ネイティブの Android アプリではなく、Web アプリケーションを使用していますが、読み込みアイコンとして使用するアニメーション gif にアニメーションが表示されません。他のサイトを閲覧したところ、Android の Safari モバイルではアニメーション GIF が機能しないようですが、これが事実であるという確認文書を見つけることができませんでした。Android ブラウザでアニメーション GIF が表示されない理由を知っている人はいますか? これに対する回避策はありますか? ネイティブ アプリの WebView でアニメーションを表示することに関するトピックはたくさん見てきましたが、ストレートな Web アプリのトピックはありません。css アニメーションで画像を作成する必要がありますか?

どうもありがとう！

私は約10個のアイコンを持っており、すべて直径約400ピクセルの円の形に配置されています。アイコンはそれぞれ80x80です。

これらのアイコンを円を描くように回転させたいのですが、アニメーションを実装すると、アイコン自体も現在回転します。たとえば、下部のアイコンが上下逆になります。

それらを円を描くように一緒に回転させながら、アイコン自体を直立させておく方法はありますか？

ありがとう！

数か月前、アニメーションのCSS3AT-AThttp://www.ruawebdesign.com/css3-at-atを作成しました。私は主に学習実験としてそれを構築し、新しいCSS3機能を使用して何が可能かを確認しました。私たちが構築するほとんどのものと同様に、私はそれをネットにリリースしました。私はそれが受け取ったサイトへの大量のトラフィックを期待していませんでした。友人や仕事仲間からの視聴回数は数回だと思いましたが、それでも世界中から週に数百回の視聴回数があります。

結果として、CPU使用率に関してもう少し合理化したいと思います。何らかの理由で、アニメーションはメモリを抑制します。スタックオーバーフローについての素敵な人々からのフィードバックをいただければ幸いです。ファンが参加しなくても、私の実験を見ることができます。

また、誰かがjavascript / jqueryの代替案を提案する前に、CSS3の機能をテストするためにこれを作成したことを思い出してください。

前もって感謝します。

divそのため、さまざまな効果が適用されたネイティブ要素 ( border-radius、box-shadowおよびtransform: scale()) がいくつかあります。それらをアニメーション化すると、2 つの奇妙なことが起こります。

1. スケールをアニメーション化しようとしているわけではありませんが、アニメーションにスケールを入れないと無視されます。
2. アニメーションにスケールを入れると Webkit が要素をぼかす

ここの例を参照してください: http://jsfiddle.net/trolleymusic/RHeCL/ - 下部のボタンが問題をトリガーします。

最初の問題は Firefox でも発生するので、アニメーションの仕様がそのようになっているためだと思います。私が望んでいたものではありませんが、大丈夫です。

2番目の問題は奇妙です。3D 変換に関係していることはわかっています。これは、(テスト目的で)円要素に対して-webkit-perspectiveまたは宣言する-webkit-transform-style: preserve-3d;と、ぼかしの問題も発生するためです。私の混乱は、z インデックスをすべて変換しようとしているわけではないということtranslateYですtranslate。

Chrome (18)、Chrome Canary (20)、Safari (5.1.2 & 5.1.4) で発生します。

それで、私は何が起こっていると思いますか？そして、どうすればぼやけを避けることができますか？

最悪のシナリオ:要素を拡大縮小する代わりに、要素に異なるサイズを使用することができますが、それは実際には問題ではありませんが、これはより洗練された解決策であると考えていたため、この問題が発生しました。

次のCSSアニメーションがあります。

基本的に、私がやりたいことは次のとおりです。

• たとえば、ホバー (so .border-strobe:hover) で、境界線の色を に変更したい#FF1D38。

• ホバーから離れたら、通常のコースでアニメーションを実行させたいだけです。

ただし、問題は、クラスのあるページにいくつかの要素があり、.border-strobeそれらを時間内に保持したいということです。

ホバーを使用して境界線の色をオーバーライドし、アニメーションの一貫性を維持する簡単な方法はありますか、または現在これを行うことはできませんか?

それは理にかなっていますか？

http://jsfiddle.net/uVv65/2/ 逆のアニメーション方向が通常と同じなのはなぜですか? から行くと思っていました。

に