CSSアニメーションの終了時に最終状態を維持する質問する

opacity: 0;CSS で に設定されているいくつかの要素でアニメーションを実行しています。アニメーション クラスは onClick に適用され、キーフレームを使用して、不透明度を0からに変更します1(他の変更も行います)。

残念ながら、アニメーションが終了すると、要素は元に戻りますopacity: 0(Firefox と Chrome の両方)。アニメーション化された要素は最終状態を維持し、元のプロパティを上書きするというのが自然な考えです。これは正しくないのでしょうか? そうでない場合、要素をそのようにするにはどうすればよいでしょうか?

コード (プレフィックス付きバージョンは含まれません):

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}