負載和懸停效果無法正常工作的Div'twitching

-1

我有一個div，充當我的網頁導航欄。該div由一個水平無序列表組成，其中每個列表項都是一個圖像。無序列表在加載時具有淡入淡出動畫，並且每個列表項都具有懸停效果，並且在鼠標懸停時按比例增大。負載和懸停效果無法正常工作的Div'twitching

出於某種原因，無論何時在Dreamweaver的實時視圖屏幕中或者在Web瀏覽器中作爲預覽加載頁面，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視頻的鏈接，顯示問題。它還顯示了我最近遇到的第二個問題，即增長的懸停效應被竊聽。任何幫助，這將不勝感激。

謝謝！

來源

2016-11-15 Josh Roberts

你能搗鼓它嗎？ – Gacci

請提供[mcve] –