CSSのアニメーションは初めてのみ動作します

Question

次のコードは、要素をフェードインまたはフェードインします。フェードアウトすると、要素がサイズを持たないようにして要素を「削除」します。

次のコードは、初めてクラスルームshow-loadingをクラスloadingの既存の要素に追加して使用します。また、クラスshow-loadingを削除したときに、クラス名hide-loadingを追加すると同時に問題なく動作します。

2回目以降、このアニメーションはレンダリングされません。代わりに、アニメーションの最後のフレームに直接ジャンプし、showまたはhideが指定されているかどうかに応じて、表示または非表示にします。最終的な結果は正しいですが、アニメーションの部分ではありません。

明らかに、クラスを設定するたびにアニメーションを取り入れることができます。例えば。要素を削除し、新しいものを追加して保存された状態をリセットします...？このため

HTML

<div class="loading"></div> 

CSS

.loading 
{ 
    overflow: hidden; 
    position: fixed; 
    background: #fff; 
    z-index: 9999; 
    user-select: none; 
} 

.loading.show-loading 
{ 
    animation: loading-fade .4s 1 linear both; 
} 

.loading.hide-loading 
{ 
    animation: loading-fade .4s 1 linear both; 
    animation-direction: reverse; 
} 

@keyframes loading-fade 
{ 
    0% 
    { 
    opacity: 0; 

    top: auto; 
    right: auto; 
    bottom: auto; 
    left: auto; 
    } 
    1% 
    { 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    } 
    100% 
    { 
    opacity: 1; 

    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    } 
} 

Answer 1

1つのトリックは二回が、異なる名前で同じアニメーションを持つことです。

THISフィドルをご覧ください。

これは知られていましたが予期しない動作で、現在のアニメーションを「削除」し、別のアニメーションを適用することで（同じ構造であっても）適用できます。そのため、2つの@keyframeアニメーション。

.loading.show-loading { 
    animation: loading-fade 1s 1 linear both; 
} 

.loading.hide-loading { 
    animation: loading-fade-backwards 1s 1 linear both; 
    animation-direction: reverse; 
}