CSS3またはjQueryのアニメーションを指定したステップ

Question

フェーディング効果を出すCSSがあります。

#mainframe.normal 
{ 
    opacity: 1.0; 
} 
#mainframe.faded 
{ 
    opacity: 0.0; 
} 
#mainframe 
{ 
    /* Firefox */ 
    -moz-transition-property: opacity; 
    -moz-transition-duration: 3s; 
    /* WebKit */ 
    -webkit-transition-property: opacity; 
    -webkit-transition-duration: 3s; 
    /* Standard */ 
    transition-property: opacity; 
    transition-duration: 3s; 
} 

それは、次のスクリプトによって制御されます。

document.getElementById('mainframe').className = "faded"; 

残念なことに、CSSでのパラメータがない、全体のアニメーションやベジェ関数の使用すべきかのステップ、唯一の合計時間を（設定遅く、速い...）。私はjQueryでそれを探していましたが、jQueryにもこのようなパラメータはありません。

1つのフレームタイムアウトを設定する方法はありますか（同じ、何フレーム使用するか）。

iPhoneの滑らかさを向上させるためには、私はそれが必要です（私はより少ないステップ==高性能と推測します）。

よろしく、

Answer 1

あなたはCSS3のキーフレームアニメーションで提供される機能を探しているように見えます。 WebKitのブラウザ（サファリ、クロム）とFF5 +でサポート

https://developer.mozilla.org/en/CSS/CSS_animations

https://developer.mozilla.org/en/CSS/@keyframes

：

詳しい情報は、以下のリンクから入手できます。

Answer 2

Animate.cssを確認してください。