html – 使用CSS转换移动div

我使用以下代码在悬停上显示隐藏的div.我正在使用CSS过渡属性来淡化隐藏的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;
}

演示:
http://jsfiddle.net/u2FKM/

最佳答案
这样的东西

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

转载注明原文:html – 使用CSS转换移动div - 代码日志