問題タブ [keyframe]

keyframeAndroidカメラを使用しているときに周波数を変更する方法はありますか? ビデオを記録するインテントを使用してから、MediaMetaDataRetrieverフレームを抽出するクラスを使用していますが、keyframes私の好みには離れすぎています。

CSSアニメーションがあり、そのアニメーションのさまざまなインスタンスを作成したいが、アニメーションのさまざまな段階から開始したい場合、どのように指定できますか。

私はこのようなものを想像しました、2番目のWebkit行は擬似コードです：

私が達成しようとしているのは、画像ホバー上の短いガウスぼかしアニメーションです。カメラに焦点を合わせるようなものです。(焦点ぼけ焦点)。

これは私がこれまでに得たものです：

これは機能していないようです。助言がありますか？

あるオブジェクトにカーソルを合わせると、別のオブジェクトでアニメーションが起動する CSS3 キーフレーム アニメーションを使用しようとしています。今、私は単純なキーフレームを持っています:

また、html は次のとおりです。

スタイルシートでアニメーション プロパティを .box1 に適用すると、実際に .box2 をアニメーション化できますか?

ユーザーが要素にカーソルを合わせると、その中に含まれる別の要素がその親を埋める単純なアニメーションを作成しようとしています。現在、私はまさにそれを行う JSFiddle を持っています。

しかし、CSS3 で実際に実行できるかどうかわからない他のいくつかの機能でこれを終了したいと思います。

1. 内側の円で親を完全に塗りつぶす方法を見つけようとしています(つまり、幅/高さ = 300px の場合)、アニメーションが完了した後、塗りつぶしを一時停止して消えないようにしたいと思います。

2. ユーザーがマウスを :hover の範囲外に移動すると、アニメーションが突然停止するのではなく、方向を逆にしたいと思います。

私は CSS3 でここまでやってきましたが、Javascript に頼らずにこれら 2 つの機能を実装できるかどうかはわかりません。CSS3でこれを完全に行う方法を知っている人はいますか/ CSS3でこれらの最後の2つの機能を実行できるかどうかを知っている人はいますか.

JSフィドル

すべての実際のブラウザーで美しく動作する CSS アニメーションがありますが、予想どおり IE10 ではうまく動作しません。IE が適切に回転したくないようです。360deg実際のブラウザで機能を犠牲にすることのない、可能な回避策をまだ探しています。

EDIT ie10 はtranslateXorrotate(360deg)のようですが、両方を同時に行うことはありません。

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

アニメーションを巻き戻すことができるかどうか疑問に思っていましたが、その場合は次のとおりです。

css3キーフレームでナビをアニメーション化しています:

ホバーするとアニメーションで拡大します。ホバーを離したときにアニメーションをスムーズに巻き戻す方法を考えています。

と組み合わせて使用​​する場合、 DRY CSS コードを実現しようとしています。私が次のものを持っているとしましょう：transformkeyframes

HTML

CSS

JSFiddle の例。

アニメーション内でscale(0.8)andを実行しないようにするにはどうすればよいですか? translateY(100px)各ステップの変換内でこれらのプロパティを適用することなく、前後に回転させたいだけです。ここでは、2 つのステップ (および) のみが使用されてfromいますが、複数のステップが使用されてtoいる場合 (たとえば0%、ご想像のとおり、変更が後で表示される場合、これはあまり良くありません。20%40%60%80%100%

transform最終的に、私はこのようなものを探しています (プロパティがオーバーライドされるため、これは不可能です):

これは可能ですか？

Ps。width/heightを にscale変更したり、margin/topプロパティを に変更したりする答えを探しているわけではありませんtranslate。また、値を簡単に変更できるようにするための LESS/SASS はありません。コードの重複が発生するためです。