负载和悬停效果无法正常工作的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] –