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

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')