web-dev-qa-db-ja.com

最後のフレームでCSS3アニメーションを停止する

クリックで再生するCSS3アニメーションの4つの部分がありますが、アニメーションの最後の部分は画面からそれを取り除くためのものです。

ただし、一度再生すると、常に元の状態に戻ります。誰でも私ができることを知っています最後のcssフレーム（100％）で停止する、または、再生されたdiv全体を取り除く方法。

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}
csscss3css-animations
155
user531192

あなたが探しています：

animation-fill-mode: forwards;

MDNの詳細 および canIuse のブラウザサポートリスト。

340
methodofaction

この動作を省略形のanimationプロパティ定義に追加する場合、サブプロパティの順序は次のとおりです。

animation-name-defaultnone

animation-duration-default0s

animation-timing-function-defaultease

animation-delay-default0s

animation-iteration-count-default1

animation-direction-defaultnormal

animation-fill-mode-これを設定する必要がありますforwards

animation-play-state-defaultrunning

したがって、最も一般的なケースでは、結果は次のようになります

animation: colorchange 1s ease 0s 1 normal forwards;

MDNのドキュメントはこちら をご覧ください

17
davnicwil
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;

ブラウザサポート

  • Chrome 43.0（4.0 -webkit-）
  • IE 10.
  • Mozilla 16.0（5.0 -moz-）
  • シャファリ4.0 -webkit-
  • Opera 15.0 -webkit12.112.0 -o-）

---（使用法：-

.fadeIn {
  animation-name: fadeIn;
    -webkit-animation-name: fadeIn;

    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;

     animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
11
Hitesh Sahu

最善の方法は、CSSの主要部分に最終状態を置くようです。ここのように、幅を220pxに設定して、最終的に220pxになるようにします。しかし、0px;から

div.menu-item1 {
  font-size: 20px;
  border: 2px solid #fff;
  width: 220px;
  animation: slide 1s;
  -webkit-animation: slide 1s; /* Safari and Chrome */
}
@-webkit-keyframes slide { /* Safari and Chrome */
  from {width:0px;}
  to {width:220px;}
}
5
Optimus Prime

WebkitAnimationNameを何も設定せず、オブジェクトのCSSをデフォルトの状態にリセットするのは問題ではありません。状態をリセットしているsetTimeout関数を削除するだけで、終了した場所に留まりませんか？

3
jfriend00

私は同様の答えを投稿しましたが、おそらくあなたは見てみたい：

http://www.w3.org/TR/css3-animations/#animation-events-

開始や停止などのアニメーションの側面を見つけることができます。その後、「停止」イベントが発生したと言ったら、domに対して何でもできます。しばらく前にこれを試してみましたが、うまくいく可能性がありますが、当分の間はWebkitに制限されると思います（ただし、おそらく既に受け入れています）。ところで、私は2つの回答に同じリンクを投稿したので、この一般的なアドバイスを提供します。W3Cをチェックしてください-彼らはほとんどルールを書き、標準を記述しています。また、Webkit開発ページは非常に重要です。

1
Jesse

実際に誰もそれを持ってこなかったので、動作させる方法は animation-play-state 一時停止に設定されています。

0
Marco