WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Problems getting Transition to work with translate

Reply
  Thread Tools Display Modes
Old 21st December 16, 06:05 AM   #1
bhsand
WLC Member
 
Join Date: Dec 2016
Posts: 2
Default Problems getting Transition to work with translate

Hello,

I'm trying to create a mobile navigation, like a "burger", which on click reveals from the top.

I've tried to do so with the "transform: translateY(-100%);" and that part is working fine.

But when I try to animate it with "transition: all .5s ease-in-out;" it does not work.

I've got the transition to work on the "burger" menu it selve, but not along with the translate.

I've tried to copy my code to codepen at: http://codepen.io/anon/pen/jVJwVa.

Be aware that the "burger" menu only shows up, when the browser window is smaller than 750px?

Tanks
Brian
bhsand is offline   Reply With Quote
Old 21st December 16, 01:44 PM   #2
bhsand
WLC Member
 
Join Date: Dec 2016
Posts: 2
Default Re: Problems getting Transition to work with translate

I've solved it my self. I forgot that I put a display: none on it.
bhsand is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:39 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.