HTML反向過渡方向

Question

在這裏很像這個問題（How would I reverse a css transition property width?）我想改變我的過渡方式。

不幸的是它不適合我！這可能是我的代碼稍微複雜一點。任何人都可以借我一隻手嗎？

的jsfiddle = http://jsfiddle.net/cPUuL/4/

CSS：

.Imgpad 
{ 
padding-top:2px; 
padding-left:2px; 
padding-bottom:3px; 
padding-right:2px; 
    position:absolute; 
    z-index:1; 
} 

.hidetext { 
float:right; 
display:none; 
margin:0; 
padding:0; 
color:#CC0000; 
font-size:30px; 
font-family:"Juice ITC"; 
} 

.Rightbox 
{ 
width:100px; 
height:100px; 
background:black; 
transition: left 2s, width 2s; 
position:absolute; 
} 

.Rightbox:hover{ 
width:250px; 
} 

.Rightbox:hover > .hidetext { 
display:block; 
} 

HTML：

</div> 
<div class="content-wrapper"> 
<div id="Divpos5"> 
<div class="Rightbox"> 
    <img class="Imgpad" src="http://b.vimeocdn.com/ps/588/58832_300.jpg" height="96" width="96" alt="Faye"> 
    <p class="hidetext">Raven Faye<br><font color="#9900CC"></font>~The Sorceress 
    </div> 
</div> 

感謝 -Asteria

Answer 1

如果這就是你要找的人，但在這裏我就是這樣做不知道......

http://jsfiddle.net/cPUuL/5/

的CSS：

.Imgpad { 
    padding-top:2px; 
    padding-left:2px; 
    padding-bottom:3px; 
    padding-right:2px; 
} 

.hidetext { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    padding: 2px; 
    margin: 0px; 
    color:#CC0000; 
    font-size:30px; 
    font-family:"Juice ITC"; 
    background: #000; 
    height: 96px; 
    width: 96px; 
    overflow: hidden; 
    z-index: -1; 
    transition: left 0.5s, width 0.5s; 

} 

.Rightbox { 
    width: 100px; 
    height: 100px; 
    background:black; 
    position: relative; 
} 

.Rightbox:hover > .hidetext { 
    left: 100px; 
    width: 250px; 
    transition: left 1s, width 1s; 
} 

正如你所看到的.Rightbox:hover > .hidetext過渡速度;比沒有:hover的那個更慢，這意味着反向轉換將比.Rightbox:hover > .hidetext更快。換句話說，當您將鼠標移出Rightbox時，會出現相反的轉變。

並修正了html。你有很多未封閉的標籤，在那裏顯然沒有用處。

<div class="Rightbox"> 
    <img class="Imgpad" src="http://b.vimeocdn.com/ps/588/58832_300.jpg" height="96" width="96" alt="Faye" /> 
    <p class="hidetext">Raven Faye<br />~The Sorceress</p> 
</div> 

這裏有一個更新的小提琴是改變right性質，因爲，如果你想讓它移動到左側，你就必須改變右上角。

http://jsfiddle.net/cPUuL/6/

CSS的變化是：

.Rightbox:hover > .hidetext { 
    right: 100px; 
    width: 250px; 
    transition: left 1s, width 1s; 
} 

.hidetext { 

    ... 
    right: 0px; /* instead of left: 0px; */ 
    ... 
} 

我還添加了保證金Rightbox所以我們可以看到的變化。

使用這個CSS，你也可以做一個很酷的過渡：

.Rightbox, 
.Imgpad, 
.hidetext { 
    transition: left 1s, width 1s; 
} 

.Rightbox:hover, 
.Rightbox:hover .Imgpad, 
.Rightbox:hover .hidetext { 
    transition: left 0.5s, width 0.5s; 
} 

.Imgpad { 
    z-index: 2; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    padding-top:2px; 
    padding-left:2px; 
    padding-bottom:3px; 
    padding-right:2px; 
} 

.hidetext { 
    position: absolute; 
    top: 2px; 
    left: 2px; 
    right: 102px; 
    bottom: 2px; 
    margin: 0px; 
    color: #CC0000; 
    font-size:30px; 
    font-family:"Juice ITC"; 
    overflow: hidden; 
    z-index: 1; 
    white-space: nowrap; 
} 

.Rightbox { 
    width: 100px; 
    height: 100px; 
    background:black; 
    position: relative; 
} 

.Rightbox:hover { 
    width: 404px; 
}