CSS Sliver on Nav animation - html

Question

So as I was updating my design website, I encountered a problem (?). It's hard to quantify because it shows at different times when I resize my browser. But I can see it when it's full screen on my laptop.
In my navigation, I have a right to left animation. The background color is white and it slides to a dark gray. But, when I'm full screen in Chrome, there is a small sliver on the right of "HIRE ME" (this link isn't currently functional btw). Like I said before, when I re-size my screen it flashes and disappears not only of the "HIRE ME," but on all of the nav links.
I don't know if this is some semantic code problem or merely the browser compatibility. Any assistance would be great. I'd attached a bit of the code, although the issue doesn't show there, but my website.
WARNING! I am a graphic designer by trade, so my mostly self-taught code is probably uglier than mud on a white picket fence to most. If you have any suggestions for semantics, I would definitely appreciate that as well. Thank you in advance!
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">WORK</li>
<li>ABOUT</li>
<li>HIRE ME</li>
</ul>
<div class="keepopen"></div>
</nav>

Answer 1

The problem here is, that you're using the background position for your animation. (I'm not entirely sure what exactly is the reason why it's shown, but i would assume that it's because chrome renders the background a pixel too far to the left.)
But, nonetheless, it's bad pratice to animate the background property since it causes the browser to repaint the page.
One solution to solve this could be to use a pseudo element and transform: scale() for the animation:
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
}
and then for the hover:
nav li:hover a:after {
transform: scaleX(1); // scale the width to normal size
}
if you do it this way, you also need to add
position: relative;
to your a
Here's some further reading about cheap and not so cheap animations to help you understand why i chose to animate with transform: scale.
Here's the complete updated code, hope this helps :) :
#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">WORK</li>
<li>ABOUT</li>
<li>HIRE ME</li>
</ul>
<div class="keepopen"></div>
</nav>