Html 使用 CSS3 动画将 div 从屏幕顶部移动到底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19145952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use CSS3 Animation to move div from top to bottom of screen?
提问by Joshua
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:
我试图让一个 div 从页面顶部扩展到底部。当动画开始时，div 将被隐藏（高度 0%），直到它以 100% 填充页面。我试图这样做，但似乎没有一个工作：
HTML
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:
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
我以前从左到右都有动画工作，但从上到下没有任何动画。我已经广泛地谷歌了这个，但无济于事。谢谢
回答by Conqueror
You could try something like the following:
您可以尝试以下操作：
.container{
background:lightblue;
height:1000px;
-webkit-animation: expand 5s;
}
@-webkit-keyframes expand{
0%{height:0px}
100%{height:1000px}
}
回答by Jon
The title of this question ('Move Div') and the actual request of the OP ('expand a div') are a little out of sync. Since this SO question is returned by Google when searching for how to animate a div, I thought I would link to a blog postthat explains how to transition a div on the css 'top' property.
这个问题的标题（'Move Div'）和 OP 的实际请求（'expand a div'）有点不同步。由于谷歌在搜索如何为 div 设置动画时返回了这个 SO 问题，我想我会链接到一篇解释如何在 css 'top' 属性上转换 div的博客文章。
Here is the fiddlefrom the blog post. Apply something similar to the following css to your div
这是博客文章中的小提琴。将类似于以下 css 的内容应用到您的 div
#bar{
position: absolute;
top:0px;
transition: 2s;
}
and use onload, hover, or some other method to apply a value for 'top' to transition to.
并使用 onload、hover 或其他一些方法来应用要转换到的“top”值。
#bar:hover{
top:100px;
}
回答by user2751288
Change the css of bar to:
将 bar 的 css 更改为：
#bar {
position: absolute;
top: 0px;
left: 0px;
width: 5%;
background-color: #3b5598;
display: block;
-webkit-animation: all 7s ease;
}
Then have some javacript to change top to 100% and margin-top to - height (which you will have to set)
然后有一些 javacript 将顶部更改为 100% 并将边距顶部更改为 - 高度（您必须设置）
This should move bar from top to bottom nicely
这应该很好地从上到下移动条
