問題タブ [css-animations]

ボタンをクリックするたびに、オブジェクトが一定量右に移動するアニメーションを作成したいと考えています。

たとえば、オブジェクトの初期位置が「左: 10px」で、アニメーションの 1 ループごとに 10px ずつ移動する場合、最初のクリック後は 20px に移動し、2 回目のクリック後は 30px に移動する必要があります。

どうすればいいですか？現在、CSS アニメーションは、クリックするたびにオブジェクトの最初の位置から再開するようです。

CSS3 変換アニメーションを使用して、オブジェクトを 10px 移動します。

最初にオブジェクトが left=10px にあった場合、現在は left=20px にあるはずです。しかし、私がするとき

アニメーションの後でも、値 10px が返されます。javascript を使用して新しい値を取得するにはどうすればよいですか? できれば、jQueryやその他のフレームワークを使用しない回答:)

つまり、アニメーションに 1 秒かかるように設定した場合、常に正確に 1 秒かかりますか (つまり、その間隔を達成するためにフレームをスキップします)?

私の質問のパート 2 には、非同期 Javascript 呼び出しで CSS アニメーションを利用する方法が含まれます。アニメーションが完了したら、アニメーションを思い出すことができる必要があります。

境界線で囲まれた画像があります。境界線をフェードインおよびフェードアウトさせたい。不透明度 + webkit キーフレームでこれは可能ですか? アイデア？

ありがとう

画面全体で要素を 50px 単位で移動する必要があります。クリックするたびに、要素は右に 50px 移動します。

次のコードを修正するにはどうすればよいですか?

http://jsfiddle.net/vujMV/13/

ここでは、毎回 50px ジャンプしてから 50px を変換し、1 回のクリックで合計 100px になります。動きをハードウェアで加速する必要があり (モバイル プラットフォームに展開するため)、translate() を使用する必要があります。

私はそのように回転アニメーションを行っているdivを持っています：

私がしたいのは、イベントをトリガーするとき（たとえば、マウスクリック）、アニメーションの時点での現在のrotateYを変数に格納したいということです。たとえば、アニメーションが約140度のときにクリックイベントがトリガーされた場合、140度を変数に格納する必要があります。現在のrotateY値を返す方法を知っている人はいますか？tnx！

これは私のコードです: http://jsfiddle.net/bnookala/b2Yz8/3/そしてこれは結果です: http://jsfiddle.net/bnookala/b2Yz8/3/embedded/result/

動作は非常に単純です。赤い div をクリックすると、3D 変換が行われ、青い div が表示されます。ただし、 (クラスを削除して) この動作を元に戻そうとしてflipもうまくいきません。2 番目はイベントjQuery.bindを受け取りませんclick- それは赤い div によってキャプチャされています。これは、入力ボックス (青い div 内) がマウス フォーカスを受け取ることができないことからも明らかです。この問題を解決するために z インデックスを設定しようとしましたが、うまくいかないようです。

元の質問...以下の作業コードを更新しました：

ajaxロードイベント中に表示されるロードイメージがあります。この画像は、body要素に「loading」クラスを追加または削除することで表示/非表示になっています。現在、ロード中の画像は背景サイズを0から100％までアニメートし、不透明度をフェードインします（「リターン」トランジションの場合はその逆）。

ただし、私が達成したいのは、フェードアウト時に背景サイズの遷移を即座に（遷移ではなく）発生させることです。

• フェードイン：.2sで0から1までの不透明度、.2sで0から100％までの背景サイズ

• フェードアウト：.2秒で1から0までの不透明度、100％から0までの背景サイズは即座に発生するはずです

  /li>

このセレクターの遷移プロパティを.loading #loader .image「すべて」ではなく「不透明度」に変更しましたが、それでも背景サイズの遷移は実行されます。

上記のcss3でさまざまなフェードインとフェードアウトのトランジションを実現する方法を知っている人はいますか？ありがとう！

更新された作業コード

問題は、個々のプロパティ（マージン、背景）をコンマ区切りのリストに分割することでした。トランジションを使用すると、すべてが異なるINトランジションとOUTトランジションを実行できなくなると思います。

zepto.jsには要素をアニメーション化する API があり、「完了」コールバック関数を含めることができます。アニメーションソース

ただし、jquery 型のキュー APIはサポートされていないようです。

zepto を使用してアニメーション シーケンスを作成するための組み込みのアプローチがあるかどうか疑問に思っていましたか、それともどこかからキュー関数をピンチするだけですか?

また、「完了」コールバックはパラメータを渡さないため、アニメーション シーケンスのどの段階にいるかを知るのは少し見づらいです。

画像を含むa をバウンスしようとしています<div>が、うまくいきません。理由がわかりません。

これは私のコードです: