Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts

    Exclamation CSS3 Animation Help

    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
    Code:
    .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.

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    The animation transition is coming from here,
    Sorry i forgot to post this.

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

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    any help anyone ?
    Been having this problem for quite some time and can't find a solution

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Posts
    139
    Thanks
    17
    Thanked 6 Times in 6 Posts

  • #5
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Thanks !
    Will take a look at it, and might just use these pre-built animations if i can.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •