使用 vh 单位和调整浏览器大小时，CSS3 动画后的最终位置不固定 window

Question

我有一个使用 vh 单位绝对定位的图像。我想为这个定位使用 CSS 设置动画。但是，这样做时，vh 单位的相对性质似乎丢失了。为了说明这一点，请看以下两个示例。在这两个中，上下拖动浏览器的底部以更改其高度。

没有动画

定位相对于屏幕高度正确调整。

#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，与 window 顶部保持相同的距离，无论屏幕高度如何。

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 属性。

，这还有显示图像的额外好处

Codepen Example with SASS（自动前缀开启）

对动画使用变换

Here is another example using a transform — translate (info link) — 这似乎提供了稍微流畅的动画。

工作示例 — 香草 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>

使用 vh 单位和调整浏览器大小时，CSS3 动画后的最终位置不固定 window

Final position after CSS3 animation doesn't stick when using vh units and resizing browser window

css

animation

absolute

没有动画

对动画使用变换

工作示例 — 香草 CSS