[解決済み] CSS3アニメーションの終了時に最終状態を維持する

質問

に設定されているいくつかの要素でアニメーションを実行しています。 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; }
}

解決方法は？

を追加してみてください。 animation-fill-mode: forwards; . 例えばこんな感じ。

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;