Question

我一直在尝试通过创建一个小型个人网站来学习CSS动画。 Joseph.how

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

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

编辑前缀仍然存在问题（在括号中使用自动前缀扩展名）

链接到回购：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

  parsed_response = JSON.parse(response.body)
  expect(parsed_response['data'].size).to eq(2)
  expect(parsed_response['data'].map { |category| category['id'].to_i })
    .to eq(Category.all.map(&:id))
  expect(response.status).to eq(200)

关键帧动画适用于chrome，但在safari

1 个答案: