キーフレームアニメーションはクロムで動作しますが、サファリで部分的に壊れています

Question

私は少し個人的なサイトを作ってCSSアニメーションを習得しようとしています。 Joseph.how

タイトルを大きくしてページ中央付近に移動して上に移動し、次に縮小して左に移動したいと考えました。残念なことにサファリを使用するとき、タイトルは左に移動しますが、縦に中央にとどまるのではなく、わずかに上昇し、アニメーションが完了した後に中央にポップバックします。

クロムについては、意図した動作が見られます（他のブラウザではまだテストされていません）。問題は、単にタイトルオーバーキーフレームで本当にhttps://github.com/JoeHowarth/joehowarth.me

EDIT 2：問題は接頭辞 （カッコ内の使用自動プレフィックス拡張）レポへ

リンクを持続する

EDITので、私は単離された1

.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

サファリのための-webkit-キーフレーム@使用

@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; 
     } 
    }