問題タブ [css-animations]

現在構築しているサイトにログインフォームがあり、サインアップフォームもあります。「サインアップ」リンクをクリックしたときにdivを反対側に回転させて、派手なアニメーションを追加したいと思います。ログインフォームを表側に、サインアップフォームを裏側に配置したいと思います。javascriptは使いたくないのですが、必要に応じて使います。

可能な答えをありがとう！

今日、これらの css3 アニメーションを IE9 で数時間動作させようとしてきましたが、困惑しています!

いくつかの JavaScript フォールバックを実装しようとしましたが、知識が非常に限られているため失敗しました。ユーザーエラーまたはコードエラーが原因で失敗したかどうかはわかりません。

これまでのコードの jsFiddle は、背景画像を色に置き換えました。基本的に、緑と黒の四角は Firefox と Webkit ブラウザーで回転します。

http://jsfiddle.net/fJxsV/

IE9でも動かしたいです。

これで私を助けていただければ、とても感謝しています！

私はモバイルGmailの非常にスムーズなページ遷移、https： //mail.google.com/mail/muが本当に好きです。

誰かがこれをどのように行うか知っていますか？彼らが使用している図書館はありますか？

私は自分の周りを見ましたが、それは明らかではありませんでした。ヒントをいただければ幸いです。

CSS3アニメーションを使用して、相対的な位置にある要素の画面上にコンテンツを配置する場合

javascriptを使用してアイテムの位置を尋ねると、アイテムがまだ残っていることが報告されます

たとえば、jQueryIsotopeプラグインを使用するこの例の要素の位置を見てください。

http://isotope.metafizzy.co/demos/basic.html

このようなjQuerycss（）メソッドを使用する必要がありますか？それがうまくいくかどうかさえわかりません！

アップデート：

この例をJsFiddlehttp://jsfiddle.net/uQtur/3/に投稿しました。

JS

HTML

javascriptを使ってモバイルサイト用の簡単な視差効果を作ろうとしています。

デスクトップブラウザからチェックするとうまくいきます。モバイルデバイスから確認し、タッチオンでスクロールすると、アニメーションがフリーズします。タッチスクリーンを離すと再び表示されます。

タッチスクリーンを使用してスクロールするときにアニメーションを維持する方法はありますか?

そうですね、どんな種類の JS アニメーションでも、タッチ スクリーン モバイルをスクロールしているときにフリーズします。

誰かがライブで問題を見たい場合は、こちらをご覧ください

http://johnpolacek.github.com/scrollorama/

デスクトップ ブラウザでは問題なく表示されますが、モバイル ブラウザからのアニメーションは、タッチしてスクロールするとフリーズします。

ありがとう

私はポートフォリオで働いて、次の研究にいつ応募するかを示しています。私たちは2012年に住んでいるので、「私たちはこの男が必要だ」という気持ちを与えるために、たくさんの派手なアニメーションとCSS3ジャンクがあります。現在、少し問題があります。

これは特定の要素のごく一部です。

Firefoxのキーフレームはまったく同じであるため、省略したことに注意してください。右、醜いフォーマットのCSSで、IDが「fadein」の要素をフェードインさせます。

問題は、アニメーションが終了した後、要素が再び消えることです。これにより、醜いフォーマットのCssが使用できないCssに変わります。

アニメーションの後に変更されたスタイルを維持する方法を誰かが知っていますか？

私はこの質問が以前に尋ねられたと思います、そしてもしそうなら私はそれについてかなり申し訳ありません。

作成中の Web ページで CSS3 を使用して非常に単純なアニメーションを作成しようとしています。必要なのは、透明な png ファイルをスピンすることだけです。回転させましたが、ページのスクロールが途切れ途切れになっています。これを解決する方法について何かヒントはありますか?

jsfiddle: http://jsfiddle.net/hybam/SaNbb/1/

ウェブサイト (開発の初期段階): http://fractale.es/boilerplate/

あまりにも似ている 8 つの異なる CSS3 アニメーションが必要なので、LESS を使用しました。以下は、@name 変数の小さな不具合が 1 つありますが、完全に機能するコードです。

CSS キーフレームは @ 記号で始まるため、LESS は @name の変数を単純に無視します。キーフレームの @ 記号をエスケープする方法、または LESS に @name を適切にレンダリングさせる方法はありますか?

サファリを除く CSS3 をサポートするすべてのブラウザーで完全に動作する CSS3 アニメーションが少しあります。奇妙ですね。ここに私のコードがあります：

HTML

CSS

私が言ったように、これは Safari では機能しません。まったく動きがありません。
また、まだ Safari でのみ、画面のサイズを変更した場合にのみキーアーム div が表示されます! DOM にはありますが、何らかの理由で表示されません。
私は何を間違っていますか？

ありがとう
マウロ

更新: あなたの回答から、@keyframes は Safari 4 でサポートされていないことがわかりました。同じページに @keyframes を使用して動作するアニメーションがあるため、奇妙です!

CSSコードは次のとおりです。

そしてhtml：

jsFiddle で自分で試してみてください (Safari 4 を使用している場合)。

css3アニメーションでdivを移動する代わりに背景画像を移動することはできますか?

例えば：

この場合、div は に移動しleft:500px;ます 背景画像だけを移動できますか?

あなたの答えに感謝します。