CSS アニメーションを終了時に最終状態に保つ

Question

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

残念ながら、アニメーションが終了すると、要素は opacity: 0 の状態に戻ります (Firefox と Chrome の両方)。私の直感では、アニメーション化された要素は最終状態に残り、元のプロパティがオーバーライドされると考えています。これは本当ではないでしょうか？そうでない場合、要素を最終状態に保つにはどうすればよいでしょうか?

コード (プレフィックス バージョンを除く):

@keyframes bubble {
    0% { 変換:スケール(0.5); 不透明度:0.0; }
    50% { 変換:スケール(1.2); 不透明度:0.5; }
    100% { 変換:スケール(1.0); 不透明度:1.0; }
}

Answer 1

さらに多くのアニメーション プロパティを使用する場合は、 短縮表記 :

を使用できます。 リーリー

次のように設定します:

• バブル アニメーション名
• 2秒 期間
• 線形 時間関数
• 0.5s 遅延
• 1 反復回数 ('infinite' も可能)
• 通常方向
• forwards フィル モード (終了位置を最終状態として使用することと互換性を持たせたい場合は、「backwards」に設定します [これは、アニメーションがオフになっているブラウザをサポートするためです] {応答ヘッダーのみ、非応答あなたの具体的な状況})

利用可能な時間関数:

リーリー

利用可能なルート:

リーリー

Answer 2

animation-fill-mode: forwards; を追加してみてください。たとえば、次のような省略形を使用できます:

リーリー

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode