マイアニメーション/ CSSの終わりは突然

Question

.topnav { 
 
    background: grey; 
 
} 
 

 
.topnav li { 
 
    list-style: none; 
 
    color: white; 
 
    display: inline; 
 
    padding: 10px; 
 
    margin: 30px; 
 
} 
 

 
li:hover { 
 
    background-color: rgba(255, 255, 255, 0.3); 
 
    transition-timing-function: ease-out; 
 
    transition: 0.4s; 
 
}

<ul class="topnav"> 
 
    <li>Lorem</li> 
 
    <li>Ipsum</li> 
 
    <li>Dolor</li> 
 
    <li>Sit</li> 
 
    <li>Amet</li> 
 
</ul>

私は私のウェブサイトの冒頭に上部のナビゲーションバーを持っています。ボタンの上にマウスを置くと、背景がスムーズに変化します。ただし、ボタンからポインタを離したとき（ホバー停止）、バックグラウンドはすぐにデフォルト値に変更されます。

私のCSSファイルで、背景色をスムーズにデフォルト値に戻し、突然終了しないようにするにはどうすればよいですか？

Answer 1

アニメーション（遷移）を非ホバー状態に追加することができます。そのため、ホバーとアンハーバーの両方でアニメーションが発生します。ここを参照してください：

.topnav li { 
    list-style: none; 
    color: white; 
    float: right; 
    display: inline; 
    border: 1px white solid; 
    border-radius: 12px; 
    padding: 10px; 
    position: relative; 
    margin: 30px; 
    text-align: center; 
    transition-timing-function: ease-out; 
    transition: 0.4s; 
} 

li:hover { 
    background-color: rgba(255, 255, 255, 0.3); 
} 

https://jsfiddle.net/Garconis/buc80c7m/