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

クリックで再生する4部のCSS3アニメーションがありますが、アニメーションの最後の部分は画面からそれを取り除くことを目的としています。

ただし、再生すると、常に元の状態に戻ります。誰でも、最後の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); }
}

あなたが探しています：

animation-fill-mode: forwards;

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

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

animation-name- デフォルト none

animation-duration- デフォルト 0s

animation-timing-function- デフォルト ease

animation-delay- デフォルト 0s

animation-iteration-count- デフォルト 1

animation-direction- デフォルト normal

animation-fill-mode- これを次のように設定する必要があります forwards

animation-play-state- デフォルト running

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

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

こちらのMDNドキュメントを参照してください

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

ブラウザのサポート

• Chrome 43.0（4.0 -webkit-）
• IE 10.0
• Mozilla 16.0（5.0 -moz-）
• Shafari 4.0 -webkit-
• Opera 15.0 -webkit-（12.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;
  }
}

最良の方法は、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;}
}  

オブジェクトのCSSをデフォルトの状態にリセットするようにwebkitAnimationNameを何も設定しないことが問題ではありません。状態をリセットしているsetTimeout関数を削除しただけでは、最終的に残ったままになりませんか？

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

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

開始や停止などのアニメーションの側面を確認し、「停止」イベントが発生したと言うと、domにやりたいことをすべて実行できます。私はしばらく前にこれを試してみましたが、うまくいくかもしれませんが、当分の間、あなたはwebkitに制限されることになると思います（しかし、おそらくすでにそれを受け入れています）。ところで、私は2つの回答について同じリンクを投稿したので、この一般的なアドバイスを提供します。W3Cをチェックしてください-彼らはほとんど規則を書いて標準を説明しています。また、webkit開発ページはかなり重要です。

実際に誰も持ってきていないので、それが機能するように作られた方法は、アニメーション再生状態が一時停止に設定されています。

今日私は、フィルモードに使用したい制限があることを学びました。これはApple開発者によるものです。噂は*約* 6ですが、確かではありません。または、クラスの初期状態をアニメーションの終了方法に設定してから、* 0％から*初期化*することもできます。