WebKitスケール変換の問題

Question

ウェブキットのスケール機能に関するヘルプが必要です。

@-webkit-keyframes expand 
{ 
    from {-webkit-transform:scale(1)} 
    to {-webkit-transform:scale(1.2)} 
} 

.image-highlight 
{ 
    -webkit-animation-name: expand; 
    -webkit-animation-duration:0.2s; 
    -webkit-animation-iteration-count:1; 
    -webkit-animation-timing-function:ease; 
} 

Iは、要素を持つHTML有する：示されるように

私は特性を有する.cssファイルを持っている私はアニメーション化する関数（スケール）とJSファイルを有する

<div id="slider"> 
    <img src="images/blueMarble_0.PNG" /> 
    <img src="images/blueMarble_1.PNG" /> 
    <img src="images/blueMarble_2.PNG" /> 
    <img src="images/blueMarble_3.PNG" /> 
    <img src="images/blueMarble_4.PNG" /> 
    </div> 

を配列の中間イメージ と私はアニメーションを行うには、このjQueryのステートメントを使用しています：

`$(pic[2]).addClass('image-highlight');` 

このjqueryのは、実際に画像（PIC [2]）をスケーリングします。しかし、スケーリングは0.2秒間行われ、元のサイズに縮小されます。どのように私は0.2秒の完了後にスケーリングを保持することができますか？私は元のサイズにサイズを変更したくない。アニメーションの継続時間を変更せずに完了できますか？ どうかお手伝いできますか？

Answer 1

私はあなたのクラスに追加したいと考えている：-webkit-animation-fill-mode: both

これはあなたのimage-highlightクラスが適用されたときに、アニメーションの最初のキーフレームがとすぐに示されるようになります最終キーフレームアニメーションの後に表示されていきます終了する。あなたが使用することができます

その他の値：

• なし - アニメーションの効果は、アニメーションの定義された期間中に明らかです。 （デフォルト）
• backwards - アニメーションの最初のキーフレームは、アニメーションスタイルがエレメントに適用されるとすぐに適用されます。これは、-webkit-animation-delayの値が0以外のアニメーションにのみ影響します。
• forwards - アニメーションの最終的なキーフレームは、アニメーションの最後の反復が完了した後も適用され続けます。

-webkit-animation-fill-mode: forwardsもおそらくあなたのニーズを満たします。