divの複数のプロパティと複数のwebkit-transition-delayを使用したCSS3 Webkit-transition

Question

divを200px右にスライドさせてから、スケールを半分に縮小して変換しようとしています。私はdivのスケールを縮小してスライドしたいと思いますが、2つのトランスフォームを独立して動作させることはできません。同時にスライドして再スケールします。私はwebkit-transition-delayがこの問題を修正すると考えましたが、指定された最後の遅延（この例では2秒）を両方の変換に適用するだけです。何かご意見は？

.example-3-transform { 
      -webkit-transform: translate(200px) scale(0.5); 
      -webkit-transition-property: webkit-transition-translate, webkit-transition-scale; 
      -webkit-transition-duration: 1s, 1s; 
      -webkit-transition-timing-function: ease-in-out, ease-in-out; 
      -webkit-transition-delay: 0s, 2s; 
} 

Answer 1

あなたはそのためのキーフレームを使用することができます。

@-webkit-keyframes myanim { 

    50% { -webkit-transform: translate(200px) scale(1) } 
    100% { -webkit-transform: translate(200px) scale(0.5) } 

} 

.example-3-transform { -webkit-animation: myanim 5s 1 ease-in-out forwards } 

パラメータは以下のとおりです。

• 5S：アニメーション
• 1の期間：繰り返し
• 簡単・インアウト：タイミングアルゴリズム、線形、イージーイン、イージーアウト、キュービックベジェも可能 w i番目のカスタムパラメータ
• forwards：アニメーションが終了した後、希望のスタイルを希望の の状態に保ちます。