Responsive Design Transition

[CodeGraphics]

This may be actually simple, but I need someone that can quickly give me a quick answer to this.

I want a situation where my website will transition smoothly at a break point when one re-sizes his browser.
I don’t want the breaking points to be jumping. I want it to break to another point smoothly.

Can anyone tell me how to achieve this with css3 effect?
Thanks

[Paulie_D]

You can’t do this with CSS transitioning unless you use a lot of positioning and percentages.

Remember it’s only us developers that go around re-sizing browsers all the…the vast majority of viewers will only need to see it at the device width.

[Paulie_D]

@ChrisP

You can’t transition / animate ‘on/off’ states like float, colors, background images etc with CSS.

[CrocoDillon]

I made a menu once with different paddings on the buttons in MQs. Used transition for all properties for something else (background color on hover + lazyness). Added bonus effect was smooth resizing of the menu when resizing the window :)

That said I agree with Paulie, seriously… no one* is resizing the window all the time just to see smooth animations, no one* cares.

* except probably developers. Me: Look how smooth this menu resizes *resizes window a few times*. Brother: Cool…

[Paulie_D]

@ChrisP

Interesting, I didn’t think you could transition colors…learn something new every day.

Perhaps I was thinking of animate with keyframes…and I could be wrong there.

What I mean was if it’s layout e.g. floats you can’t transition those.

---

I recall that CSS-Tricks (v9) used to do something like I **think** he’s talking about but I’m pretty sure that was done with positioning &/or margins &/or percentages.

@ChrisCoyier would know.

[notfilc]

I think the last version of CSS-Tricks did transition but it really makes no difference, like everyone has already said, no on goes around resizing browser windows apart from developers.

[CodeGraphics]

Ok. Thanks.

[Author]

Posts