使用 CSS3 动画将 div 从屏幕的顶部移动到底部？答案

【问题标题】：Use CSS3 Animation to move div from top to bottom of screen?使用 CSS3 动画将 div 从屏幕的顶部移动到底部？
【发布时间】：2013-10-09 08:52:43
【问题描述】：

我试图让一个 div 从页面顶部扩展到底部。当动画开始时，div 将被隐藏（高度 0%），直到它以 100% 填充页面。我试图这样做，但似乎都没有工作：

HTML

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>About Me</title>

    <link rel="stylesheet" href="stylesheets/main.css">
</head>

<body>
    <div id="bar"></div>
</body>
</html>

CSS：

    *
{
    box-sizing: border-box;
}

body
{
    height: auto;
    width: auto;
    direction: ltr;
    z-index: 1;
    background-color: #fff;
}

#bar
{
    position: relative;
    top: 0px;
    left: 0px;
    width: 5%;
    background-color: #3b5598;
    display: block;
    -webkit-animation: bar 7s ease;
}

@keyframes bar
{
  0% {
    top: 0%;
  }
  100% {
    top: 100%;;
  }
}

我之前有动画从左到右工作，但从上到下没有任何效果。我已经广泛地用谷歌搜索了这个但无济于事。谢谢

【问题讨论】：

动画top属性将平移元素，如果你想扩大，动画height或bottom属性。此外，关键帧确实适用于更复杂的动画，当从一种状态切换到另一种状态时，您可以使用transition，它会有更好的浏览器支持。
使用 jQuery 非常快：$("#bar").animate({"height":"500px"}, 3000); 参考：api.jquery.com/animate

标签： html css animation

【解决方案1】：

将bar的css改为：

 #bar {
 position: absolute; 
 top: 0px; 
 left: 0px; 
 width: 5%; 
 background-color: #3b5598; 
 display: block; 
 -webkit-animation: all 7s ease; 
 }

然后有一些 javacript 将 top 更改为 100% 并将 margin-top 更改为 - 高度（您必须设置）

这应该很好地从上到下移动栏

【讨论】：

【解决方案2】：

您可以尝试以下方法：

.container{
    background:lightblue;
    height:1000px;
    -webkit-animation: expand 5s;
}

@-webkit-keyframes expand{
    0%{height:0px}
    100%{height:1000px}
}

http://jsfiddle.net/J7Aw7/

【讨论】：

【解决方案3】：

这个问题的标题（'Move Div'）和 OP 的实际请求（'expand a div'）有点不同步。由于谷歌在搜索如何为 div 设置动画时返回了这个 SO 问题，我想我会链接到一个 blog post，它解释了如何在 css 'top' 属性上转换一个 div。

这是博文中的fiddle。将类似于以下 css 的内容应用到您的 div

#bar{
  position: absolute;
  top:0px;
  transition: 2s;
}

并使用 onload、hover 或其他方法为“top”应用一个值以转换到。

#bar:hover{
  top:100px;
}

【讨论】：