問題タブ [css-animations]

私はケンバーン効果を構築し、それをスムーズにする方法をいくつか作りました. 問題は、ユーザーがタッチスクリーン デバイスで画面をスクロールすると、アニメーションがぎくしゃくすることです。

スクロール時にアニメーションを一時停止することでこれを修正できるかもしれませんが、そうではありません。アニメーションは、ユーザーがスクロールしてぎくしゃくするまで問題ありません。私はフィドルを設定しました。

http://jsfiddle.net/gxUhH/58/

何か案は？

PhoneGap を使用して iPad アプリを作成しています。アニメーションに CSS 変換を使用しようとしていますが、デバイスがサポートする可能性のあるハードウェア アクセラレーションを活用するために適切な方法を使用しているかどうかは完全にはわかりません。

ページの上から下にスライドさせたいモーダルウィンドウ(DIV)です。画面の上部に配置された後、jquery を介してクラスを追加することで、ページ自体にアニメーション化されます。

iOS 4 を搭載した iPad 2 に展開すると、これは機能しますが、アニメーションが少しぎくしゃくしています。完全に滑らかなアニメーションではありません。これを処理するために別の CSS を使用する必要がありますか? それとも、これは PhoneGap アプリであり、問​​題の DIV が大きな背景画像を持っていることの単なる副作用でしょうか?

サムネイルの上にcssを付けてホバーすると、背景のグラデーションがフェードインするようにトランジションしようとしています。トランジションは機能しませんが、rgba()値に変更するだけで問題なく機能します。グラデーションはサポートされていませんか？私も画像を使ってみましたが、画像も遷移しません。

別の投稿のように、それが可能であることは知っていますが、どれほど正確に理解することはできません。ヘルプ>使用するCSSは次のとおりです。

PhoneGapを使用してiOSアプリを構築しています。translate3dcSSアニメーションを使用して「フリップ」効果を作成しています。

これは、より単純な要素でうまく機能します...フロント/バックdivとおそらく余分なスパンを持つDIV。

しかし、より大きな要素、つまり画面全体を反転しようとすると、再描画の不具合が発生します。cssクラスを交換して遷移を開始するとすぐに何が起こりますか？「bottom」divの一部が「top」divをポップスルーし、次にフリップが発生し、その後再びポップアウトします。そして、透けて見えるのは要素全体ではありません...私が3D回転を変換しているのは、軸に沿って分割された要素の半分です。

これを引き起こしている可能性があるものについてのアイデアや理論はありますか？これは、アプリとしてのiPadとSafariのデスクトップの両方で同じように発生するため、Webkitの問題のようです。

それはいくつかのCSSの問題でしょうか？または、Safariが処理できる以上の大きな背景画像を持つ複雑なネストされた要素を使用してフルスクリーンのtranslate3d回転を実行しようとしていますか？

更新1：

問題の絞り込みは進んでいます。

何が起こっているのかというと、translate3dフリップを実行するときに「覗き見」している要素は、以前にtranslate3dを介して配置されていた子要素であるということです。

translate3dで移行したい「ページ」構造：

これはそれ自体で機能します。フロントdivは、カードフリップ効果のあるバックdivに置き換えられます。

#front問題は、ページ全体をめくる前に、 translate3dを使用してdiv内のいくつかの要素をアニメーション化したことです。

CSSの例：

translate3dを使用する代わりに、divをtopスタイルで再配置するか、topプロパティを変換するだけの場合、ピークスルーの問題は発生しません。もちろん、それは私がそれぞれ滑らかなアニメーションまたはハードウェアアクセラレーションをあきらめなければならないことを意味します。

この時点では、Webkitのバグのようです。これからも遊んでいきます。誰かが以前にこれに遭遇し、回避策を見つけた場合、私はすべての耳です！

次を使用して、オブジェクトを左から右に移動し、再び元に戻すCSSアニメーションがあります。

このアニメーションは無限ループで実行されます。

ある時点で、オブジェクトを X の位置、たとえば 50px に移動して停止させたいと考えています。

次を使用して、オブジェクトを最終的な位置に移動する2番目のアニメーションクラスを(javascript経由で)追加しようとしました:

ただし、これにより、オブジェクトはトランジションではなく、2 番目のアニメーションにジャンプします。

2 つのアニメーション間でほぼトゥイーンする方法について、何か提案やヒントはありますか?

簡単な質問:

:hover疑似セレクター (つまり、:activeなど)を介してアニメーションをトリガーすることが適切/実行可能でない場合に、CSS トランジションを活用することは可能ですか?

私のユースケースは、フォーム送信後に何かをアニメーション化することです。私は次のようなことができると思っていました：

次に、javascript を使用して、shownアニメーション化するこの要素にクラスを追加します。

jQueryなどをアニメーションに使用しないのはなぜですか? よろしくお願いします。私が対象としているプラ​​ットフォームである iPhone やその他のモバイル デバイスでは、CSS トランジションがはるかにスムーズです。現在、jQuery を使用してアニメーションを作成していますが、スムーズではありません。

疑似セレクターについて私が求めていたことを明確にするために編集しました。

CSS Webkitアニメーションは非常に新しく、学習に非常に熱心です。そしてまたたくさんの無知!!! したがって、いくつかの質問があります。

1. CSS Webkitの最良のウォークスルー/チュートリアル/公式サイトは何ですか？
2. CSSファイルでプログラムする前にWebkitをインストールする必要がありますか？

ありがとう、よろしく！

パリジャット

JavaScriptを使用せずに、ページの読み込み時にCSS3トランジションアニメーションを使用することは可能ですか?

これは私が望むもののようなものですが、ページの読み込み時:

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

これまでに見つけたもの

• CSS3 transition-delay、要素への影響を遅らせる方法。ホバー時のみ動作します。
• CSS3 Keyframeはロード時に動作しますが、非常に遅いです。そのせいで役に立たない。
• CSS3 トランジションは十分に高速ですが、ページの読み込み時にアニメーション化されません。

CSS3を使用して見栄えのするドロップダウンメニューを作成することを期待して、アニメーションを使用してスタイルを設定しました。ドロップのタイミングをより細かく制御できるようにするために、トランジションの代わりにアニメーションを使用しました。これはより美的に心地よいと思います。ただし、アニメーションオーバートランジションを使用すると、逆のプロセスをアニメーション化するのがはるかに難しくなるという問題が発生します。メニューを使用しているときにアニメーションを効果的に一時停止して、トランジションの場合と同じように、アニメーションを逆方向にアニメーション化する方法があるかどうか疑問に思いました。

CSSが現在どのようになっているのかを次に示します。

CSSを交互に設定し、繰り返し2を作成することで、メニューを上下に移動させることができます。メニューを使用できるようにするために、反復の合間に一時停止する、ある種のjavascriptソリューションまたはその効果に対する他の何かを探しています。

coma で区切るだけでは、以下の同じコードを簡単に実現できないことに気付きました@keyframes mymove, @-moz-keyframes mymove, etc..。それらが機能するためには、以下のようにそれぞれ個別に宣言する必要があります。

それらをグループ化してこのコードを短くする方法はありますか?