Переместить div с переходом CSS

Я использую следующий код для отображения скрытого div на hover. Я использую свойство CSS transition для того, чтобы исчезать в скрытом div. Можно ли скользить в скрытом (например, слева направо) div вместо замирания при использовании только CSS? Здесь мой код:

HTML

<div class="box">
    <a href="#"><img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg"></a>
    <div class="hidden"></div>
</div>

CSS

.box{
    position: relative;    
}

.box .hidden{    
   background: yellow;
    height: 300px;    
    position: absolute;
    top: 0;
    left: 0;    
    width: 500px;
    opacity: 0;    
    transition: all 1s ease;
}

.box:hover .hidden{
    opacity: 1;
}

Demo: http://jsfiddle.net/u2FKM/

Ответ 1

Что-то вроде этого?

DEMO

И код, который я использовал:

.box{
    position: relative;
    overflow: hidden;
}

.box:hover .hidden{

    left: 0px;
}

.box .hidden {    
    background: yellow;
    height: 300px;    
    position: absolute; 
    top: 0;
    left: -500px;    
    width: 500px;
    opacity: 1;    
    -webkit-transition: all 0.7s ease-out;
       -moz-transition: all 0.7s ease-out;
        -ms-transition: all 0.7s ease-out;
         -o-transition: all 0.7s ease-out;
            transition: all 0.7s ease-out;
}

Я также могу добавить, что можно переместить элит с помощью transform: translate();, который в этом случае мог бы работать примерно так: DEMO nr2

Ответ 2

Я добавил префиксы поставщика и изменил анимацию на all, поэтому у вас есть как непрозрачность, так и анимированная ширина.

Это то, что вы ищете? http://jsfiddle.net/u2FKM/3/

Ответ 3

transition-property:width;

Это должно сработать. вы должны иметь код, зависящий от браузера

Ответ 4

Чтобы добавить мой ответ, кажется, что переходы должны основываться на начальных значениях и конечных значениях внутри свойств css, чтобы иметь возможность управлять анимацией.

Те переработанные классы css должны обеспечить ожидаемый результат:

.box{
    position: relative;  
    top:0px;
    left:0px;
    width:0px;
}

.box:hover .hidden{
    opacity: 1;
     width: 500px;
}

.box .hidden{    
   background: yellow;
    height: 300px;    
    position: absolute; 
    top: 0px;
    left: 0px;    
    width: 0px;
    opacity: 0;    
    transition: all 1s ease;
}

<div class="box">

    <a href="#">
        <img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg"></a>
        <div class="hidden"></div>

</div>

Ответ 5

Это может быть хорошим решением для вас: измените код, как это очень малое изменение

.box{
    position: relative; 
}
.box:hover .hidden{
    opacity: 1;
    width:500px;
}
.box .hidden{
    background: yellow;
    height: 334px; 
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    opacity: 0;
    transition: all 1s ease;
}

Смотрите демо здесь

Ответ 6

Да, это возможно, но не поддерживается всеми браузерами.

См. w3schools