CSS3 Animation Help

[aaronhockey_09]

Hey guys,
So to start here is the site - http://aaron-armstrong.com/new-a/
Im trying to make a div slide in and out on the click of a div.
If you click on the navigation items you can top, left, bottom and right you can see items slide in and out.

But for some reason when i click on the bottom or right navigation item.
Not only does it not actually slide out ( snaps instead. ) but it also does not go back to the original place.

Here is the corresponding CSS - you shouldnt need the HTML as it is being called just fine.

CSS

.top { margin-top: -100%;  z-index: 999; background:url(../images/green.svg) 50% 50% fixed; background-size: 100% 100%; color:$white; position: absolute; }
.bottom { margin-top: 100%;  z-index: 999; background:url(../images/purp.svg) 50% 50% fixed; background-size: 100% 100%; color:$white; position: absolute; }
.left { margin-left: -100%;   z-index: 999 ;background:url(../images/yell.svg) 50% 50% fixed; background-size: 100% 100%;color:$white; position: absolute; 
	.vert-middle { height: 100%; top:0;
		.two-thirds, .one-third { height: 70%; margin-top: 15%; background:url(../images/buttons-bg.png) 0 0 repeat; }
	}
}
.right { margin-left: 100%; z-index: 999; background:url(../images/orange.svg) 50% 50% fixed; background-size: 100% 100%; color:$white; position: absolute; 
	.vert-middle { height: 100%; top:0;
		.sixteen { height: 70%; margin-top: 15%; background:url(../images/buttons-bg.png) 0 0 repeat; 
			.two-thirds, .one-third { margin:0;}
			article { padding-bottom:10px; border-bottom:1px solid #fff; margin-bottom: 20px;
				&:last-child { border:none;}
			}
		}
	}
}


#top:target { margin-top:0;
		.bottom-home { display: block;}
	}
	#bottom:target { margin-top:0; 
		.top-home { display: block;}
	}
	#left:target { margin-left:0; 
		.right-home { display: block;}
	}
	#right:target { margin-left:0; 
		.left-home { display: block;}
	}

Any help would be greatly appreciated.

[aaronhockey_09]

The animation transition is coming from here,
Sorry i forgot to post this.

.full { width:100%; z-index: 2; height: 100%; top:0; left:0; position: absolute; overflow: hidden; @include transition(all 0.2s ease-in-out);}

[aaronhockey_09]

any help anyone ?
Been having this problem for quite some time and can't find a solution

[CHEWX]

Have you seen http://daneden.me/animate/

[aaronhockey_09]

Thanks !
Will take a look at it, and might just use these pre-built animations if i can.