Proof of Concept CSS Trick – please help!

[kyvaith]

Hi!

I’m trying to make a pure CSS website with some animations. The main goal is to have something as similar as possible to this, but without JS: http://lab.hakim.se/meny/ .

Right now I have code that works ONLY IN GOOGLE CHROME, and with problems: http://codepen.io/kyvaith/pen/xsrav
The site flicker on mouseover, because hover effect is applied to div with contains both menu and main container. Main container is just moved to right with margin-left, outside the base div.

The code is complete invalid. Is there any way to do it right?

[chrisburton]

I’m not seeing a flicker in Chrome.

[Kitty Giraudel]

It looks great on my Chrome Canary 26 too.

Edit: pretty nice work by the way.

[kyvaith]

Well… For me, the above code causes the main container jumps when you move the mouse over it. Try to move the mouse slowly over it. It looks like he could not decide whether to be in the container from which it was ejected by transform: translateX or not. Anyway, the problem was solved. Here is the working code (uses: target but for me it does not matter): http://codepen.io/kyvaith/pen/Djrew
I did everything again from the beginning. The last thing is to achieve compatibility with non-WebKit browsers :)

[Author]

Posts