CSS Sliver on Nav animation

Question

デザインウェブサイトを更新しているときに、問題が発生しました（？）。ブラウザのサイズを変更するときに異なる時間に表示されるため、数値化するのは難しいです。しかし、私はそれが私のラップトップでフルスクリーンのときにそれを見ることができます。

私のナビゲーションでは、右から左にアニメーションがあります。背景色は白で、暗い灰色にスライドします。しかし、私がChromeで全画面表示されているときは、「HIRE ME」の右側に小さいスライバーがあります（このリンクは現在機能していません）。私が前に言ったように、画面サイズを変更すると、「HIRE ME」だけでなく、すべてのナビゲーションリンク上で点滅して消えます。

これはセマンティックコードの問題であるのか、単にブラウザとの互換性であるのか分かりません。どんな援助も素晴らしいだろう。私はコードの一部を添付しましたが、問題はそこには表示されませんが、私のウェブサイトです。

警告！私は貿易によってグラフィックデザイナーなので、私が主に独学で作ったコードは、おそらくほとんどが白いピケのフェンスの泥よりも醜いです。セマンティクスに関する提案があれば、私もそれに感謝します。前もって感謝します！

www.kelsiewilson.co/

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,900); 
 
@import url(https://fonts.googleapis.com/css?family=Fira+Sans+Extra+Condensed:400,700); 
 
.yellowline { 
 
    width: 100%; 
 
    height: 8px; 
 
    background-color: #FFC45C; 
 
} 
 

 
.outline { 
 
    width: 20%; 
 
    padding: 130px 20%; 
 
    margin: -10px 0 0 31.5%; 
 
    border: .75px solid #FFC45C; 
 
} 
 

 
h1.name { 
 
    margin-left: 26%; 
 
    font-size: 72px; 
 
    font-family: 'Playfair Display', serif; 
 
    letter-spacing: 1.2px; 
 
    font-weight: 900; 
 
    margin-top: -170px; 
 
    color: #2B343E; 
 
} 
 

 
nav { 
 
    margin: 0 auto; 
 
    display: block; 
 
    text-align: center; 
 
    padding-bottom: 100px; 
 
    padding-top: 10px; 
 
} 
 

 
nav ul { 
 
    display: inline-block; 
 
    list-style-type: none; 
 
} 
 

 
nav ul li { 
 
    float: left; 
 
    margin: 0 auto; 
 
    clear: float; 
 
} 
 

 
nav ul li.active a { 
 
    color: #2B343E; 
 
} 
 

 
nav ul li.active:hover a { 
 
    color: white; 
 
} 
 

 
nav ul li a { 
 
    font-size: 16px; 
 
    font-family: 'Fira Sans Extra Condensed', sans-serif; 
 
    font-weight: 400; 
 
    color: #d3d3d3; 
 
    width: 100px; 
 
    padding: 4px 16px; 
 
    margin: 0 50px; 
 
    background: #fff; 
 
    background: linear-gradient(to left, #2B343E 50%, white 50%); 
 
    background-size: 200% 100%; 
 
    background-position: left bottom; 
 
    margin-left: 10px; 
 
    transition: all 2s ease; 
 
    text-decoration: none; 
 
    border-right: solid 0px #6b5d53; 
 
} 
 

 
nav li:hover a { 
 
    font-family: 'Fira Sans Extra Condensed'; 
 
    font-weight: 400; 
 
    background-position: right bottom; 
 
    color: white; 
 
}

<div class="yellowline"> 
 
</div> 
 
<div class="outline"> 
 
</div> 
 

 
<header> 
 
    <h1 class="name">Kelsie Wilson</h1> 
 
</header> 
 
<nav> 
 
    <ul> 
 
    <li class="active"><a href="index.html">WORK</a></li> 
 
    <li><a href="about.html">ABOUT</a></li> 
 
    <li><a href="contact.html">HIRE ME</a></li> 
 
    </ul> 
 
    <div class="keepopen"></div> 
 
</nav>

Answer 1

ここでの問題は、あなたがあなたのアニメーションの背景の位置を使用していること、です。 （正確に何が表示されているのかは完全にはわかりませんが、クロムで背景がピクセルを左にずらしていると思われます）

しかし、それでもアニメーションをアニメーション化するのは悪いことですブラウザがページを再ペイントするため、バックグラウンドプロパティを使用します。

nav li:hover a:after { 
    transform: scaleX(1);   // scale the width to normal size 
} 

あなたがそれを行う場合：ホバーのために、その後

nav ul li a::after { 
    content: ""; 
    position: absolute; 
    background: #2B343E; 
    width: 100%;     
    height: 100%; 
    left: 0; 
    top: 0; 
    transform: scaleX(0);   // scales the width down to 0 

    transform-origin: 100% 100%; //set transform origin to right-most, 
           //otherwise it would scale from the center of the button 
    transition: all 2s ease;  // pseudo element needs its own transition 
    z-index: -1;     // set z-index to -1 so that the link text is visible 
} 

と：アニメーションのスケールを（）：これを解決する

一つの解決策は、擬似要素を使用して変換することができこの方法は、また、あなたの

に

position: relative; 

を追加する必要があります

Here's some further reading about cheap and not so cheap animationsなぜ私がtransform：scaleを使ってアニメートするのかを理解するのに役立ちます。

ここで完全な更新されたコードだ、これが役に立てば幸い:)：

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,900); 
 
@import url(https://fonts.googleapis.com/css?family=Fira+Sans+Extra+Condensed:400,700); 
 
.yellowline { 
 
    width: 100%; 
 
    height: 8px; 
 
    background-color: #FFC45C; 
 
} 
 

 
.outline { 
 
    width: 20%; 
 
    padding: 130px 20%; 
 
    margin: -10px 0 0 31.5%; 
 
    border: .75px solid #FFC45C; 
 
} 
 

 
h1.name { 
 
    margin-left: 26%; 
 
    font-size: 72px; 
 
    font-family: 'Playfair Display', serif; 
 
    letter-spacing: 1.2px; 
 
    font-weight: 900; 
 
    margin-top: -170px; 
 
    color: #2B343E; 
 
} 
 

 
nav { 
 
    margin: 0 auto; 
 
    display: block; 
 
    text-align: center; 
 
    padding-bottom: 100px; 
 
    padding-top: 10px; 
 
} 
 

 
nav ul { 
 
    display: inline-block; 
 
    list-style-type: none; 
 
} 
 

 
nav ul li { 
 
    float: left; 
 
    margin: 0 auto; 
 
    clear: float; 
 
} 
 

 
nav ul li.active a { 
 
    color: #2B343E; 
 
} 
 

 
nav ul li.active:hover a { 
 
    color: white; 
 
} 
 

 
nav ul li a { 
 
    position: relative; //<-- added position: relative 
 
    font-size: 16px; 
 
    font-family: 'Fira Sans Extra Condensed', sans-serif; 
 
    font-weight: 400; 
 
    color: #d3d3d3; 
 
    width: 100px; 
 
    padding: 4px 16px; 
 
    margin: 0 50px; 
 
    margin-left: 10px; 
 
    transition: all 2s ease; 
 
    text-decoration: none; 
 
    border-right: solid 0px #6b5d53; 
 
} 
 
nav ul li a::after { 
 
content: ""; 
 
position: absolute; 
 
background: #2B343E; 
 
width: 100%;    
 
height: 100%; 
 
left: 0; 
 
top: 0; 
 
transform: scaleX(0); 
 
transform-origin: 100% 100%; 
 
transition: all 2s ease; 
 
z-index: -1; 
 
} 
 
nav li:hover a { 
 
    font-family: 'Fira Sans Extra Condensed'; 
 
    font-weight: 400; 
 
    
 
    color: white; 
 
} 
 
nav li:hover a:after { 
 
transform: scaleX(1); 
 
}

<div class="yellowline"> 
 
</div> 
 
<div class="outline"> 
 
</div> 
 

 
<header> 
 
    <h1 class="name">Kelsie Wilson</h1> 
 
</header> 
 
<nav> 
 
    <ul> 
 
    <li class="active"><a href="index.html">WORK</a></li> 
 
    <li><a href="about.html">ABOUT</a></li> 
 
    <li><a href="contact.html">HIRE ME</a></li> 
 
    </ul> 
 
    <div class="keepopen"></div> 
 
</nav>