Keyframe animation works on chrome but partly broken on safari - css

Question

I've been trying to learn css animations by making a little personal site.
Joseph.how
I wanted the title to start large and near the page center, move up, then shrink and move to the left. Unfortunately when using safari the title moves to the left but instead of staying vertically centered, rises slightly, then pops back to center after the animation is done.
You can see the intended behavior on chrome (haven't tested with other browsers yet).
EDIT The problem persists with prefixes
(used auto-prefix extension in brackets)
Link to repo: https://github.com/JoeHowarth/joehowarth.me
EDIT 2 The problem is really just with the title-over keyframe, so I isolated that one
.header-container {
width: 100%;
border-bottom: 1px #000 solid;
height: 40vh;
position: relative;
background-color: #000;
color: #eee;
-webkit-animation: banner-up 1s 2s ease-in-out forwards;
animation: banner-up 1s 2s ease-in-out forwards;
font-family: 'Lato';
.title {
font-size: 30px;
position: absolute;
top: 90%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-weight: 700;
letter-spacing: .5em;
font-size: 60px;
-webkit-animation: title-over 4s 2s ease-in-out forwards;
animation: title-over 4s 2s ease-in-out forwards;
span {
font-weight: 100;
letter-spacing: .1em;
font-style: italic;
}
}
nav {
width: 40vw;
height: 10%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
position: absolute;
top: -5vw;
right: 20px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
-webkit-animation: nav 1s 7s ease-out forwards;
animation: nav 1s 7s ease-out forwards;
-webkit-transition : all 2s ease;
transition: all 2s ease;
div {
width: 15vw;
height: 100%;
margin: 0 2px;
// border: 1px #333 solid;
background: #111;
&:hover {
background: #222;
}
&:active {
background: #2a2a2a;
font-size: 38px;
}
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 35px;
p {
text-align: center;
color: #eee;
display: block;
font-weight: 100;
}
}
}
}
// move title to left, make smaller
#keyframes title-over {
30% {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
45% {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
letter-spacing: .5em;
font-size: 60px;
}
65% {
letter-spacing: .5em;
}
100% {
top: 50%;
left: 10px;
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
letter-spacing: .1em;
font-size: 40px;
}
}
#-webkit-keyframes title-over {
30% {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
45% {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
letter-spacing: .5em;
font-size: 60px;
}
65% {
letter-spacing: .5em;
}
100% {
top: 50%;
left: 10px;
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
letter-spacing: .1em;
font-size: 40px;
}
}
HTML
<div class="header-container">
<header class="title">
JOSEPH.HOW<span>ARTH</span>
</header>
<!-- nav defaults to display:none, comes in w/ animation-->
<nav>
<div id="about-nav" href="#"><p>About Me</p></div>
<div id="proj-nav" href="#"><p>Projects</p></div>
<div id="resume-nav" href="#"><p>Resume</p></div>
</nav>

Answer 1

Use #-webkit-keyframes for safari
#keyframes banner-up {
50% {
border-bottom: 1px #111 solid;
}
100% {
height: 80px;
border-bottom: 3px #111 solid;
}
}
/* Safari */
#-webkit-keyframes banner-up {
50% {
border-bottom: 1px #111 solid;
}
100% {
height: 80px;
border-bottom: 3px #111 solid;
}
}