使用CSS3動畫將div從屏幕頂部移動到屏幕底部嗎？

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

我以前從左到右制作過動畫，但是從上到下沒有動畫。 我已經在Google上進行了廣泛的搜索，但無濟於事。 謝謝

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的實際請求（“ expand a div”）有點不同步。 由於這個SO問題是Google在搜索如何為div設置動畫時返回的，我想我將鏈接到博客文章，該文章解釋了如何在css“ top”屬性上轉換div。

這是博客文章中的小提琴。 將類似以下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更改為-height（您必須設置）

這應該很好地將欄從上移到下

使用CSS3動畫將div從屏幕頂部移動到屏幕底部嗎？

問題描述

3 個解決方案

解決方案1
4 已采納 2013-10-02 20:44:59

解決方案2
1 2016-05-08 21:32:08

解決方案3
0 2013-10-02 20:26:36

使用CSS3動畫將div從屏幕頂部移動到屏幕底部嗎？

問題描述

3 個解決方案

解決方案1 4 已采納 2013-10-02 20:44:59

解決方案2 1 2016-05-08 21:32:08

解決方案3 0 2013-10-02 20:26:36

解決方案1
4 已采納 2013-10-02 20:44:59

解決方案2
1 2016-05-08 21:32:08

解決方案3
0 2013-10-02 20:26:36