私は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; }
}
animation-fill-mode: forwards;
を追加してみてください。例えばこんな感じ:
animation: bubble 1.0s forwards;
-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
より多くのアニメーション属性を使用している場合の省略形は次のとおりです。
animation: bubble 2s linear 0.5s 1 normal forwards;
2秒間、線形タイミング関数、0.5秒間の遅延、1回の繰り返しカウント、法線方向、順方向塗りつぶしモード
ショートハンドバージョンを使用しない場合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;