CSSアニメーションが正しく機能しない

Question

私はフェードアウトして縮める非常に簡単なアニメーションをdivに持っています。

しかし、アニメーションが終了すると、最初に戻り、そこにとどまるという問題があります。

div { 
 
    background-color: red; 
 
    height: 80px; 
 
} 
 

 
.fade-out { 
 
    animation-name: fade-out; 
 
    animation-duration: 2s; 
 
} 
 

 
@keyframes fade-out { 
 
    0% { opacity: 1; } 
 
    50% { opacity: 0; } 
 
    100% { opacity: 0; height: 0;} 
 
}

 
    <div class="fade-out">Style Test</div>

Answer 1

あなた.fade-outルールにanimation-fill-mode: forwards;を追加した場合、それはあなたのアニメーションを修正します。

animation-fill-modeは、アニメーションを実行する前後にCSSルールを適用する方法を指定します。デフォルトはnoneです。つまり、アニメーションを実行する前後でアニメーションスタイルは適用されません。そのため、アニメーション前の状態に戻っていることがわかります。

forwardsは、ブラウザに最後のキーフレームのスタイルを保持するように指示します。それはあなたが探しているものです。

詳細については、the MDN docsを参照してください。

div { 
 
    background-color: red; 
 
    height: 80px; 
 
} 
 

 
.fade-out { 
 
    animation-name: fade-out; 
 
    animation-duration: 2s; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
@keyframes fade-out { 
 
    0% { opacity: 1; } 
 
    50% { opacity: 0; } 
 
    100% { opacity: 0; height: 0;} 
 
}

<div class="fade-out">Style Test</div>

Answer 2

使用animation-fill-modeプロパティ

.fade-out { 
    animation-name: fade-out; 
    animation-duration: 2s; 
    animation-fill-mode: forwards 
}