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

我试图让一个div从页面顶部扩展到底部。当动画开始时，div将被隐藏（高度0％），直到它以100％填充页面。我试图做它像这样，但没有它似乎是工作：使用CSS3 Animation将div从屏幕的顶部移动到底部？

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

我有动画前的工作由左到右，但没有从顶部到底部。我已经广泛地谷歌这一点，但无济于事。由于

来源

2013-10-02 Joshua

为顶部属性设置动画会翻译元素，如果您想要展开它，请为“height”或“bottom”属性设置动画效果。此外，关键帧确实适用于更复杂的动画，从一种状态转到另一种状态时，您可以使用“转换”，并且它将具有更好的浏览器支持。 – Jasper

使用jQuery很快就做到了：'$（“＃bar”）。animate（{“height”：“500px”}， 3000）;'参考：http：//api.jquery.com/animate/ – gibberish

你可以尝试像以下：

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

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

http://jsfiddle.net/J7Aw7/

来源

2013-10-02 20:44:59 Conqueror

更改栏的CSS来：

#bar { 
position: absolute; 
top: 0px; 
left: 0px; 
width: 5%; 
background-color: #3b5598; 
display: block; 
-webkit-animation: all 7s ease; 
}

然后有一些javacript改变顶部为100％和边距来 - 高度（你必须设置）

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

来源

2013-10-02 20:26:36 user2751288

-1

这个问题的标题（'Move Div'）和OP的实际请求（'扩展div'）有点不同步。由于这个SO问题是由Google在搜索如何为div创建动画时返回的，因此我认为我会链接到一个blog post，该解释说明如何在CSS'top'属性上转换div。

以下是博客文章中的fiddle。应用类似于下面的CSS的东西到你的DIV

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

和使用的onload，悬停，或一些其他方法来应用价值“顶”过渡到。

#bar:hover{ 
    top:100px; 
}

来源

2016-05-08 21:32:08 Jon

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

回答

相关问题