Nav bar animation using keyframe in fixed size layout

Is it possible to animate navbar using css3 animation such as:

#nav {
animation-delay:0s;
animation-duration:1s;
animation-name:slideDown;
animation-fill-mode:forwards; }

@keyframes slideDown {
from { bottom: 50%;}
to {bottom: 0%;} }

in fixed size layout? I’m already doing this in responsive layout, but need to change it to fixed size. the navbar is in full width. Then, should I set the height, so that if I open using mobile phone, the navbar will not too far at the bottom. Because I need it to appear below the content. And this navbar will change position on every page. such as. in index page:

@keyframes slideDown {
from { bottom: 50%;}
to {bottom: 0%;} }

but in about page:

@keyframes slideDown {
from { bottom: 0%;}
to {bottom: 30%;} }

and so on. Anyone have idea how to do this?

Hi aelynne welcome to Sitepoint :slight_smile:

I can’t quite grasp what you are after but you mention that you are already doing something similar in a responsive layout so perhaps we could see that example and take it from there.

Although you can animate things with CSS3 you can’t really re-order content or change the flow of the document if that’s what you meant?

For us to offer best help its best if you can set up the html and css that you are trying to modify so that we have something to work with.

this is example in responsive : http://jsfiddle.net/DCpP3/

I need to change all these to fixed size design. the problem is the navbar animation, how to set it same height as in example? some of the page will have navbar at the bottom of the content.

Hi aelynne,

Thanks for the example. :slight_smile:

It does spring up more questions than it solves I’m afraid.

If we add content to your demo your navbar sits on top of the content and then scrolls up the screen.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	height:100%;
	background-color:#F69220;
	font-family:Arial, "Gill Sans", Helvetica, "Myriad Pro";
}
#box0 {
	position:absolute;
	z-index:0;
	width:100%;
	height:100%;
	background-image:url(images/about_bg.png);
	background-size:100% 100%;
	box-shadow:0px 0px 0px rgba(0,0,0,1.0), inset 0px 0px 0px rgba(0,0,0,1.0);
}
.wrapper { width: 100%; }
#nav {
	position:absolute;
	z-index:3;
	width:100%;
	padding:0;
	margin:0;
	border-top:0px solid rgb(0,0,0);
	border-bottom:0px solid rgb(0,0,0);
	list-style-type:none;
	text-align:center;
	background-color:#ffffff;
	box-shadow:0 0 5px rgba(0,0,0,0.5);
 inset 0 0 0px rgba(0,0,0,0.8);
	animation-delay:0s;
	animation-duration:1s;
	animation-name:slideDown;
	animation-fill-mode:forwards;
	-webkit-animation-delay:0s;
	-webkit-animation-duration:1s;
	-webkit-animation-name:slideDown;
	-webkit-animation-fill-mode:forwards;
}
#nav li {
	display:inline;
	margin:0 20px;
}
#nav a {
	color:rgb(0,0,0);
	text-transform:uppercase;
	text-decoration:none;
	color:#E34927;
	font-weight:bold;
	font-size:14px;
}
#nav li.navlogo img {
	padding-bottom: 0px;
	vertical-align:middle;
}
#about_title {
	z-index:1;
	position:absolute;
	bottom: 75%;
	left: 20%;
}
#about_text {
	z-index:2;
	position:absolute;
	top:28%;
	left:20%;
	text-align:justify;
	word-wrap:break-word;
	width: 60%;
	line-height: 24px;
	font-family:Helvetica;
	font-size: 1em;
}
 @keyframes slideDown { from {
bottom:0%;
}
to { bottom:15%; }
}
 @-webkit-keyframes slideDown { from {
bottom:0%;
}
to { bottom:15%; }
}
 @keyframes show { from {
opacity:0
}
to { opacity:1; }
}
@-webkit-keyframes show { from {
opacity:0
}
to { opacity:1; }
}
</style>
</head>

<body>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<ul id="nav">
		<li class="navlogo"><a href="index.html"><img src="http://placehold.it/30x92" width="30" height="92"></a></li>
		<li><a href="about.html">ABOUT</a></li>
		<li><a href="property_development.html">PROPERTY DEVELOPMENT</a></li>
		<li><a href="#">CONTACT US</a></li>
</ul>
</body>
</html>

That’s not usable in any real sense.

Do you have a link with real content in your page or can you tell me what is going to be above this navbar? In essence you can’t place the navbar absolutely at the bottom of the window and not have it scroll away with content or sit on top of content. I need to see the wider picture of your intended use.

If you want a footer after the content then don’t absolutely place it there but let it just follow in the flow of the page as per normal.

For mobile sites you can offer alternative styles via media queries and basically restyle the nav to look better on smaller screens. You will need the viewport meta tag added to stop mobiles form scaling the page though.

If you want the footer at the bottom of the window on a fixed position then you would need position:fixed instead of absolute and then possibly remove the fixed positioning for mobiles as they don’t like fixed positioning much and it usually takes up to much real estate on a small display anyway.

Therefore I can’t really give more specific help until we tie all these things together. You may already know all these things anyway but it’s difficult fo me to gauge how much you know about RWD without a more complete example or at least a good indication of what you have in mid to follow:)