Transition from 100% to auto

Question

I have the following: http://jsfiddle.net/yHPTv/2491/

I was wondering why the transition isn\'t working? What it\'s supposed to do is slide in the hidden element (which

Answer 1

As you say you can't animate from % to auto. But to get the desire effect you can also use transform property. Try this:

.block .hidden {
    background: red;
    padding: 3px 10px;
    position: absolute;
    bottom: 0;
    right: 0;
    transform:translateX(100%);
    transition: 1s;
}

.block:hover .hidden {
    transition: 1s;
    transform:translateX(0)
}

Check the Demo Fiddle

Answer 2

For transition to work, you have to define the property you wish to change in both element states. In your example it doesn't work because there is no common property between '.hidden' and ':hover' (you set the 'left' property in '.hidden', and 'right' property in ':hover')

If you instead use something like:

.block {
    position: relative;
    width: 500px;
    height: 300px;
    overflow: hidden;
    background: lightgrey;
}

.block .hidden {
    background: red;
    padding: 3px 10px;
    position: absolute;
    bottom: 0;
    right: -100%;
    transition: 1s;
}

.block:hover .hidden {
    transition: 1s;
    right: 0%;
}

It will work because we defined the 'right' property in both states ('.hidden' and ':hover')

Answer 3

Consider transitioning on right, from -100% to 0:

.block {
    position: relative;
    width: 500px;
    height: 150px; /* shortened to fit in the "Run" window */
    overflow: hidden;
    background: lightgrey;
}

.block .hidden {
    background: red;
    padding: 3px 10px;
    position: absolute;
    bottom: 0;
    right: -100%;
    transition: 1s;
}

.block:hover .hidden {
    right: 0;
    transition: 1s;
}

<div class="block">
    <div class="hidden">ABCDEFGHIJKL</div>
</div>