Menu
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:
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%;;
}
}
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
465
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}
}
http://jsfiddle.net/J7Aw7/
93
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 post that explains how to transition a div on the css 'top' property.
Here is the fiddle from the blog post. Apply something similar to the following css to your 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.
#bar:hover{
top:100px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
