Sliding in a fixed element using CSS3 transitions

Question

I have an element with fixed position and auto width (must have auto width) that should slide-in from the left.

I've defined two states for it: hidden and visible. When visible it should be positioned on the left side of the window, when hidden it should be just outside of view.

Visible state

left: 0;
/* right: auto; */

Hidden state

right: 100%;
/* left: -element auto width */

Both of these states display ok when transition is static without any animation.

Alternative 1: CSS3 transforms

I've also tried using CSS3 transforms, which works, but I'm afraid of cross browser differences. When transitions are not supported transition would automatically fall back to static change, but if I use CSS3 transforms, there's no direct fall-back. It has to be explicitly defined.

This is a working demo of the effect by using CSS3 transitions and transforms. As you can see, the width of the left bar is wide as much as it has to be and it slides just beyond the left edge when going into hidden state.

Alternative 2: Collapsing element width

This could somehow be done by manipulating element width (while also using max/min width to support auto width), but the problem with this is that content doesn't move. It's apparent that element width is being manipulated. We have to move the element including its content.

Question

Is there any way to avoid CSS3 tranforms while also satisfying following rules:

• width must be auto
• when visible it's positioned on the left window edge
• when hidden it's positioned just outside of left edge

Answer 1

You will need to wrap your element into another div:

HTML

<div id="wrapper">
    <div id="element">
        Lorem ipsum dolor sit.
        <br />
        Lorem ipsum dolor sit amet.
        <br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae explicabo!
    </div>
</div>

And #element transitions between left: 0% and left: -100%.

Live example: http://codepen.io/anon/pen/vgzcI