如何更改CSS中轉換的「返回」？

我剛剛開始搞亂轉換，我認爲他們很棒，可以爲未來的網站帶來很大的潛力。這是我當前的代碼：如何更改CSS中轉換的「返回」？

我想更改圓/平方米的「迴歸」的過渡，使文本似乎跟看不見的，因爲它傳回了文本，而不是文本笨拙地等待消失，直到廣場回到原來的位置。

我該怎麼做呢？

這裏是我的HTML：

<!DOCTYPE html> 
<html> 

<head> 
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 

<body> 
    <div class="wrap"> 
     <div class="box2"> 
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor   incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> 
     </div> 
    <div class="box"></div> 
    </div> 
</body> 
</html>

和相關的CSS：

.box { 
    height: 100px; 
    width: 100px; 
    background: blue; 
    position: absolute; 
    -webkit-transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, border-radius 1s linear 0s, background 1s linear 0s; 
} 
.box2 { 
    height: 100px; 
    width: 83%; 
    padding: 10px; 
    position: absolute; 
    -webkit-box-sizing: border-box; 
    opacity: 0; 
    -webkit-transition: opacity .5s cubic-bezier(.5, -.5, .3, 1.3) .75s; 
} 
.box2 span { 
    font-size: .90em; 
    margin-right: 10%; 
    float: left; 
    font-family: 'Georgia', sans-serif; 
} 

.wrap:hover .box { 
    border-radius: 50%; 
    margin-left: 73%; 
    background: coral; 
} 

.wrap:hover .box2 { 
    opacity: 1; 
}

來源

2014-08-28 ClaytonAlanKinder

您可以爲「懸停」和「懸停去」設置不同的過渡，就像這樣：

.box2 { 
    height: 100px; 
    width: 83%; 
    padding: 10px; 
    position: absolute; 
    -webkit-box-sizing: border-box; 
    opacity: 0; 
    /* This is the transition for "hover out". Note the shorter delay. */ 
    -webkit-transition: opacity .5s cubic-bezier(.5, -.5, .3, 1.3) .2s; 
} 


.wrap:hover .box2 { 
    opacity: 1; 
    /* This is the transition for "hover". Note the longer delay. */ 
    -webkit-transition: opacity .5s cubic-bezier(.5, -.5, .3, 1.3) .75s; 
}

WORKING EXAMPLE

來源

2014-08-29 00:08:33 showdev

T帽子完美！非常感謝！ – ClaytonAlanKinder 2014-08-29 00:23:01

如何更改CSS中轉換的「返回」？

回答

相關問題