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