ロードとホバー効果が正しく働いていないとDiv 'twitching'が発生する

-1

自分のウェブページのナビゲーションバーとして機能するdivがあります。 divは、各リスト項目が画像である水平の順序付けられていないリストで構成されます。順序付けされていないリストには読み込み時にフェードインアニメーションがあり、各リスト項目にマウスオーバーするとスケールが拡大するホバー効果があります。ロードとホバー効果が正しく働いていないとDiv 'twitching'が発生する

何らかの理由で、Dreamweaverのライブビュー画面またはウェブブラウザのプレビューのいずれかでページを読み込むたびに、divが右側の位置から数ピクセル離れて開始し、フェードインアニメーションが完了したら、それは適切な位置に「つまずく」。

これは複雑なコードではないので、非常に不満です。ソースコードページとそのCSSスタイルシートだけがプロジェクトにロードされています。

これは、ナビゲーションバーに関連するすべてのHTMLコードです：

<div class="Nav"> 
    <ul> 
     <li> 
      <img src="icons/filmicon.png" width="120px" height="120px" alt="Filmography"><br/> 
     </li> 
     <li> 
      <img src="icons/cameraicon.png" width="120px" height="120px" alt="Photography"><br/> 
     </li> 
     <li id="josh"> 
      <img src="img/joshforsite.png" width="300px" height="300px" alt="About Me"><br/> 
     </li> 
     <li> 
      <img src="icons/designicon.png" width="120px" height="120px" alt="Design"><br/> 
     </li> 
     <li> 
      <img src="icons/brandicon.png" width="120px" height="120px" alt="Branding"><br/> 
     </li> 
    </ul> 
</div>

...これはナビゲーションバーに関連するすべてのCSSコードです：私は、再び

.Nav { 
display: flex; 
flex-direction: row; 
justify-content: center; 
list-style-type: none; 
position: absolute; 
width: 100%; 
padding-top: 16%; 
white-space: nowrap; 

.Nav li { 
vertical-align: middle; 
display: inline-block; 
padding-right: 4%; 
opacity: 1; 
-webkit-animation: fadein 2s; 
    -moz-animation: fadein 2s; 
    -ms-animation: fadein 2s; 
    -o-animation: fadein 2s; 
     animation: fadein 2s; 
     transition: all .3s ease-in-out; 

.Nav li:hover { 
    -webkit-transform: scale(1.2); 
     -ms-transform: scale(1.2); 
      transform: scale(1.2); 

@keyframes fadein { from { opacity: 0; } to { opacity: 1; }} 
@-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; }} 
@-webkit-keyframes fadein {from { opacity: 0; }to { opacity: 1; }} 
@-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; }}

初心者はHTML & CSSなので、コーディングがどれくらい混乱しているか分かりません。

Hereは、問題を示すYouTube動画へのリンクです。また、成長するホバー効果が盗まれているという2番目の問題を最後に示しています。これについての助けに感謝します。

ありがとうございました！

出典

2016-11-15 Josh Roberts

あなたはそれを試すことができますか？ – Gacci

[mcve] –