Grow your CSS skills. Land your dream job.

Responsive Design Transition

  • # March 20, 2013 at 8:30 am

    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

    # March 20, 2013 at 8:35 am

    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.

    # March 20, 2013 at 8:35 am

    [CSS Transitions](https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions “”)

    # March 20, 2013 at 8:37 am

    @ChrisP

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

    # March 20, 2013 at 8:40 am

    @Paulie_D, he didn’t specify that’s the kind of transitions he wanted..you can transition background-colors, widths, heights, font-sizes, etc..

    http://codepen.io/ChrisPlz/pen/GntpF

    # March 20, 2013 at 9:10 am

    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…

    # March 20, 2013 at 9:22 am

    @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.

    # March 20, 2013 at 9:23 am

    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.

    # March 20, 2013 at 9:29 am

    @Paulie_D, yes, def can’t transition floats, but like you, and the rest of the css-tricks community, I agree that transitioning anything with media queries is utterly pointless. Nobody besides designers/developers sit there and resize their browsers to see transitions..I have a few similar stories to @CrocoDillon, where I do something I think is super cool with a media query transition, show a few people, and get a generic “cool” for a response.

    # March 20, 2013 at 9:36 am

    Ok. Thanks.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".