web-dev-qa-db-ja.com

CSS3アニメーション終了時の最終状態の維持

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

残念ながら、アニメーションが終了すると、要素は（FirefoxとChromeの両方で）opacity: 0に戻ります。私の自然な考え方は、アニメーション化された要素は最終的な状態を維持し、それらの元のプロパティを上書きすることです。これは本当ですか？そうでなければ、どうやってその要素にそうさせることができますか？

コード（プレフィックスバージョンは含まれていません）

@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; }
}
csscss3css-animations
246
Dan

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

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

より多くのアニメーション属性を使用している場合の省略形は次のとおりです。

animation: bubble 2s linear 0.5s 1 normal forwards;

2秒間、線形タイミング関数、0.5秒間の遅延、1回の繰り返しカウント、法線方向、順方向塗りつぶしモード

20
agiopnl

ショートハンドバージョンを使用しない場合animation-fill-mode: forwardsがAFTERであることを確認してください。

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

vs

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
8
Taylor A. Leach