...

View Full Version : CSS3 Animation Help



aaronhockey_09
11-28-2012, 06:11 AM
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
11-28-2012, 06:14 AM
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
11-28-2012, 08:11 PM
any help anyone ?
Been having this problem for quite some time and can't find a solution

CHEWX
11-28-2012, 09:22 PM
Have you seen http://daneden.me/animate/

aaronhockey_09
11-28-2012, 09:26 PM
Thanks !
Will take a look at it, and might just use these pre-built animations if i can.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum