CSS3 动画后的最终位置在使用 vh 单位和调整浏览器窗口大小时不会粘住

Question

我有一个使用vh单位绝对定位的图像。我想使用 CSS 对这个定位进行动画处理。然而，当这样做时，vh单位的相对性质似乎已经丧失。为了说明这一点，请看以下两个示例。在这两个中，上下拖动浏览器底部以更改其高度。

无动画

位置根据屏幕高度正确调整。

http://codepen.io/maxedison/pen/jPOQPW

#mountain {
  position: absolute;
  left: 50%;
  top: 55vh;
  opacity: 1;
}
img {
  width: 180vh;
  margin-left: -50%;
}

<div id="screen1">
  <div id="mountain">
    <img src="http://upload.wikimedia.org/wikipedia/commons/2/20/Red_Slate_Mountain_1.jpg">
  </div>
</div>

动画
定位根本不调整。就像vh单元变成了静态px，无论屏幕高度如何，都与窗口顶部保持相同的距离。

http://codepen.io/maxedison/pen/QbWJbj

#mountain {
  position: absolute;
  left: 50%;
  top: 100vh;
  opacity: 0;
  -webkit-animation: lincoln_page_load 2s ease forwards;
  animation: lincoln_page_load 2s ease forwards;
}
img {
  width: 180vh;
  margin-left: -50%;
}
@-webkit-keyframes lincoln_page_load {
  to {
    opacity: 1;
    top: 55vh
  }
}
@keyframes lincoln_page_load {
  to {
    opacity: 1;
    top: 55vh
  }
}

<div id="screen1">
  <div id="mountain">
    <img src="http://upload.wikimedia.org/wikipedia/commons/2/20/Red_Slate_Mountain_1.jpg">
  </div>
</div>

关于如何纠正此问题的任何想法？我知道我可以求助于JavaScript来使这项工作:)

Answer 1

仅当动画暂停forwards并且动画仍处于活动状态时，这才是一个问题：

• 将top: 55vh放在#mountain中，以便在动画结束时它具有此值并删除opacity: 0

• 删除forwards以便完成动画

• 将opacity: 0和top: 100vh添加到关键帧中的from，以便在页面加载时显示这些值

这具有在浏览器不支持 animation 属性时显示图像的额外好处。

使用 SASS 的代码笔示例（自动前缀已打开）

---

对动画使用变换

这是另一个使用转换的示例 - translate（信息链接） - 它似乎提供了稍微平滑的动画。

---

工作示例 — 香草 CSS

#mountain {
  position: absolute;
  left: 50%;
  top: 55vh;
  -webkit-animation: lincoln_page_load 2s ease;
  animation: lincoln_page_load 2s ease;
}
img {
  width: 180vh;
  margin-left: -50%;
}
@-webkit-keyframes lincoln_page_load {
  from {
    top: 100vh;
    opacity: 0;
  }
  to {
    opacity: 1;
    top: 55vh
  }
}
@keyframes lincoln_page_load {
  from {
    top: 100vh;
    opacity: 0;
  }
  to {
    opacity: 1;
    top: 55vh
  }
}

<div id="screen1">
  <div id="mountain">
    <img src="http://upload.wikimedia.org/wikipedia/commons/2/20/Red_Slate_Mountain_1.jpg">
  </div>
</div>