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></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
23 Answers
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; } 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} } Change the css of bar to:
#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)
This should move bar from top to bottom nicely
