Sliding door effects using CSS

codepen.io

23 points·html5web··12 comments

Open articleView on HN

Not to confuse with "Sliding Doors of CSS" [1] - Had me confused for a moment there.

[1] http://www.alistapart.com/articles/slidingdoors/

I was thinking the same thing and I was shocked at first to see the link wasn't pointing to ALA.

Why not use pseudo elements?

http://codepen.io/anon/pen/dpceK

edit: actually looks like it doesn't work in chrome. Anyone know why?

You beat me to it.

I'd say it's WebKit — not just Chrome — since it doesn't work with Safari 6 either.

Works for me in Chrome (22.0.1229.94 on Win7). There's nothing in the CSS to prevent it from working in Webkit.

Very nice effect. Very very smooth on Firefox Aurora with plenty of ram.

Is it possible to make this CSS effect work on the iphone? Is it a matter of tweaking the CSS or is it due to the limitation of the iOS Browser? Im curious of how smooth it looks on the iPhone. Would happily have checked a different mobile... but I dont have one of those.

As far as I know, it's possible to make it work on iOS Safari browsers, as Safari mobile browser supports CSS animations, transforms and transition effects.

It's works for me on iOS 6.

The door is just a border being resized with a transition. Borders can't be styled that well. So this effect is neat but not very usable imo.

And just what is the point of not using JavaScript? Are there browsers that support the latest CSS features but don't support JavaScript? Are there people who turn off JavaScript but expect animations to work?

Things like GPU acceleration come to mind, and also having the visual style where it's actually relevant: in the stylesheet.

The edges don't align on Android, the image peeks through.

Reply on news.ycombinator.com