4

I'm trying to get a div to expand from the top of the page to the bottom. When the animation starts the div will be hidden (height 0%), till it fills the page at 100%. I tried to do it like so, but none of it seems to be working:

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%;;
  }
}

I've had animations working before from left to right, but nothing coming from the top to bottom. I've extensively google'd this but to no avail. Thanks

4

3 回答 3

4

您可以尝试以下方法：

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

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

http://jsfiddle.net/J7Aw7/

于 2013-10-02T20:44:59.780 回答
4

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

这是博客文章中的小提琴。将类似于以下 css 的内容应用于您的 div

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

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

#bar:hover{
  top:100px;
}
于 2016-05-08T21:32:08.090 回答
0

将 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 更改为 - height （您必须设置）

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

于 2013-10-02T20:26:36.720 回答