要素の再表示後のCSSアニメーションの防止

Question

初期ページの読み込み時にアニメーションを表示する要素があります。その後、その要素は隠され、再び表示されません。

この要素は親コンテナの中にラップされます。ユーザーの操作によっては、親コンテナ（display:noneまたはhidden属性）を非表示にすることがあります。親コンテナが再表示された後はいつでも、要素は再びアニメーション化されますが、これは避けたいものです。再表示されるたびに要素が再アニメーション化されるのはなぜですか？この動作を無効にするCSSルールはありますか？

ここにはexampleがあります。リンク上にマウスを置いてホバーアウトすると、要素が再びアニメーション化されます。

純粋なCSSで禁止することはできますか.Javascriptを使用しないでください。どうやって？

Answer 1

アニメーションが完成した後、アニメーション要素が基本的に消えて何も重なっていないという目標がある場合は、アニメーションのフォワード状態を取り出し、.block要素の固有の高さを0pxにできます。次に、0％と100％のキーフレームを必要な高さ（100ピクセル）に設定し、アニメーションが完了した後、高さが0でクリック可能な領域を持たないブロックをすべて目的と目的に使用します。

@keyframes drop { 
    0% { 
    transform: translateY(-150%); 
    opacity: 0; 
    height: 100px; 
    } 
    15% { 
    transform: translateY(10%); 
    } 
    20% { 
    transform: translateY(-10%); 
    } 
    25% { 
    transform: translateY(0); 
    opacity: 1; 
    } 
    100% { 
    transform: translateY(1); 
    opacity: 1; 
    height: 100px; 
    } 
} 
.block{ 
    width:100px;height:0px;background:black; 
    animation: 1.3s 2 alternate drop; 
}