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

Question

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

我正在尝试让 div 从页面顶部扩展到底部。当动画开始时，div 将被隐藏（高度 0%），直到它以 100% 填充页面。我尝试这样做，但似乎都不起作用：

超文本标记语言

<!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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

我以前有过从左到右的动画，但没有从上到下的动画。我已经对此进行了广泛的谷歌搜索，但无济于事。谢谢

Answer 1

Con*_*ror 5

您可以尝试如下操作：

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

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

Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/J7Aw7/

Answer 2

Jon*_*Jon 5

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

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

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

Run Code Online (Sandbox Code Playgroud)

并使用 onload、hover 或其他方法来应用要转换到的“top”值。

#bar:hover{
  top:100px;
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，4 月前
查看次数：	88980 次
最近记录：	9 年，9 月前