問題タブ [keyframe]

CSS3 キーフレームを使用してアニメーション付きの順序付けられていないリストを読み込もうとしています。私の問題は、アニメーションが始まる前にリストがロードされることです。そして、アニメーションの後にのみロードしたい。

ここに私がこれまでに達成したことの結果がありますhttp://jsbin.com/agelix/1/edit

HTML

CSS

Css3 キーフレーム アニメーションは、ドキュメント内のすべての要素が読み込まれた後に開始されますか? ページ全体が適切に読み込まれる前にアニメーションが開始されると問題になるため、これは重要な問題です。

さらに処理するために、ビデオからすべてのキーフレームを BMP 形式で抽出したいと考えています。このコマンドを調査することができました：

MP4 と MKV ファイルを除くすべてのビデオ ファイルで機能します。MP4 ファイルからすべてのフレームを抽出する代わりに、多くのエラー メッセージが表示されます。

MP4ファイルでも機能させるにはどうすればよいですか、または目標を達成するために他のユーティリティ/メソッド(mencoder/vlc)を使用する必要がありますか?

このキーフレームを定義しました：

そしてクラス名に適用されます：

そして、必要に応じて要素にクラスを追加します。

ただし、アイテムは回転しません。私は何を間違っていますか？

注意: 私は firefox でのみテストしています。そのため、-moz- ベンダー プレフィックスのみを使用しています。

スクリプトを修正する必要があります。grab_animation 関数、save_animation 関数、そして最後に restore_animation を書きました。

ここにあります。

問題は、この関数はうまく機能しますが、アニメーションの値を復元するだけで、すべてのキーフレームにキーを設定しないことです。実装する必要があるコマンドはわかっていますcmds.setKeyframeが、多くのテストの後、まだ機能しません。誰が私を助けることができます？

いくつかの css プロパティを含む JSON オブジェクトを事前設定するにはどうすればよいですか。含まれていないすべてのプロパティを前のオブジェクトに追加し、次のすべてのアイテムに同じものを追加する必要があるのはどこですか?

私が必要とする声明：

たとえば、次のスタイルの要素があります。

そして、次のkeyframe-alike オブジェクト:

ここでは、前のすべての項目を入力する必要があります。この場合は次のとおりです。

• 0: width = 0
• 1000: width = 0

...次のような結果が得られます。

...さらに、次のすべての項目を事前に入力する必要があります。

• 2000: top = 100

結果:

最終的なオブジェクトは次のようにする必要があります。

アップデート

TJ Crowderの回答はこれまでのところ良さそうに見えますが、問題keyframeは-objectwidthにあるプロパティがわからないことtopです.

Update2

現在、私は次のものを持っています：

しかし、それは

ただし、直接宣言して行う場合

何か案は？