CSSイージーイントランジションが正常に動作しない

Question

マウスを動かすためのナビゲーションバーでCSSトランジションイズインアウトを使用しています。 しかし、カーソルがハイパーリンク領域を離れた直後に、マウスカーソルが移動してスナップバックするだけで、スムーズに移動することはありません。

これは私が使用したCSSです：

nav { 
    position: fixed; 
    z-index: 1000; 
    top: 0; 
    bottom: 0; 
    width: 200px; 
    background-color: #036;  
} 

nav ul { 
    list-style: none; 
    margin-top: 15px; 
} 

nav ul li a { 
    text-decoration: none; 
    display: block; 
    text-align: center; 
    color: #fff; 
    padding: 10px 0; 
} 

.nav-logo { 
    margin-left: 20px; 
    background-color: #cacaca; 
} 

.nav-logo:hover { 
    transform: scale(1.1); 
    transition: all 1s ease-in-out; 
} 

nav ul li a:hover { 
    background-color: gold; 
    color: black; 
    border-radius: 10px; 
    transform: scale(1.1); 
    transition: .3s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -ms-transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
} 

Answer 1

あなたはトランジションスタイルを取る必要があります。

transition: .3s ease-in-out; 
-moz-transition: all 1s ease-in-out; 
-ms-transform: scale(1.1); 
-webkit-transform: scale(1.1); 

そしてnav ul li a:hoverからそれらを削除し、実際の要素nav ul li a

に追加

ホバーに残っている間は、ホバリングしていないときに移行を本質的に削除しているため、移行は適用されませんホバー状態を離れる。

Answer 2

ホバー状態ではなく、ルート要素にトランジションを追加する必要があります。

nav { 
    background-color: yellow; 
    position: relative; 
    overflow: auto; 
    transition: background-color .3s ease-in-out; 
} 
nav:hover { 
    background-color: pink; 
} 

http://codepen.io/mrshannonyoung/pen/BLzpNz