417

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; }
}
4

5 に答える 5

713

を追加してみてくださいanimation-fill-mode: forwards;。たとえば、次のようにします。

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;
于 2012-10-20T18:02:03.970 に答える
29

短針バージョンを使用していない場合:がアニメーション宣言animation-fill-mode: forwardsの後にあることを確認してください。そうしないと機能しません...

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

対

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
于 2018-09-11T22:03:16.863 に答える