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

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;
}

    
ABCDEFGHIJKL