1

キーフレーム アニメーションに続いて 2 つの場所の間を遷移させたいコントロールがあります。同じキーフレームを逆に使用する方法はありますか? また、アニメーションを途中で止めて最初に戻す方法はありますか？

これが私が今持っているものです（そして、2つのキーフレームを結合したいです：

@-webkit-keyframes explode {
  0% {
-webkit-transform: scale(1.0) rotate(0deg) translate(0px, 0px);
 }
 33% {
   -webkit-transform: scale(2.0)   translate(100px, -150px);
 }
 67% {
   -webkit-transform: scale(2.0)   translate(200px, -250px);
 }
 100% {
   -webkit-transform: scale(1.0)  translate(-15px, -15px);
 }
}

@-webkit-keyframes explodeBack {
 0% {
  -webkit-transform: scale(1.0)  translate(-15px, -15px);
 }
 67% {
   -webkit-transform: scale(2.0)   translate(100px, -150px);

 }
 100% {
   -webkit-transform: scale(1.0) rotate(0deg) translate(0px, 0px);

 }
}

.leftArrowAnimateForward{
     -webkit-animation-name: explode;
     -webkit-animation-duration: 3s;
     -webkit-animation-timing-function: linear;
     -webkit-animation-direction:normal; /* Safari and Chrome */
      -webkit-transform: scale(1.0)  translate(-15px, -15px);
}

.leftArrowAnimateBackward{
     -webkit-animation-name: explodeBack;
     -webkit-animation-duration: 3s;
     -webkit-animation-timing-function: linear;
     -webkit-animation-direction:alternate; 
      -webkit-transform: scale(1.0)  translate(0px, 0px);
}
4

3 に答える 3

0

これまでの内容を視覚的に確認せずに何をしようとしているのかを理解するのは困難ですが、animation-fill-mode を確認してください。

これにより、アニメーションを forward に設定すると最後のキーフレームで停止できるようになります。現時点では、キーフレームが終了すると 0 に戻ると思います。

プレイして、成功したかどうかをお知らせください。

于 2012-01-21T09:27:55.880 に答える
0

animation-iteration-count: 2 と animation-direction: alternate を組み合わせ、アニメーションの長さを負の値に設定した animation-delay を組み合わせると、最初にやりたいことを実行できます。アニメーションを再生することができます。逆にちょうど1回。(基本的には逆方向のアニメーションにスキップして、そこから再生を開始します。)

2 番目のキーフレーム セットを定義し、JS を使用してクラス間を切り替えない限り (またはホバーなど)、純粋な CSS アニメーションでやりたい 2 番目のことを行うことはできません。

于 2012-09-27T16:05:12.690 に答える