Question

我正试图让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%;;
  }
}

我从左到右都有过动画，但是从上到下都没有任何动画。我已经广泛地谷歌这个但无济于事。感谢

Answer 1

您可以尝试以下内容：

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

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

http://jsfiddle.net/J7Aw7/

Answer 2

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

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

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

并使用onload，hover或其他方法将'top'的值应用于转换为。

#bar:hover{
  top:100px;
}

Answer 3

将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 to - height（你将不得不设置）

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

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

3 个答案: