关键帧动画在 chrome 上有效，但在 safari 上部分损坏

Question

我一直在尝试通过制作一个小型个人网站来学习 css 动画。 Joseph.how

我希望标题从大并靠近页面中心开始，向上移动，然后缩小并向左移动。不幸的是，当使用 safari 时，标题会向左移动，而不是保持垂直居中，而是略微上升，然后在动画完成后弹回中心。

您可以在 chrome 上看到预期的行为（尚未在其他浏览器上测试过）。

EDIT 前缀问题依然存在 （在括号中使用自动前缀扩展）

回购链接：https://github.com/JoeHowarth/joehowarth.me

编辑 2 问题实际上只是与标题重叠的关键帧有关，所以我隔离了那个

  .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 进行 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;
      }
    }