如何反转CSS3过渡?

jpk*_*ala 0 css webkit css3 css-transitions

我有跟随HTML,其中悬停增长div向下但我想向上成长.

<html>
<head>
<style type="text/css"> 

div
{
position:absolute;
top:130px;
left:30px;
width:100px;
height:100px;
background:red;
-webkit-transition:height 2s; 

}

div:hover
{
height:200px;
}
</style>
</head>
<body>


<div></div>



</body>
</html>
Run Code Online (Sandbox Code Playgroud)

如何在悬停时反转转换?

小智 6

尝试在div上设置bottom属性,而不是top:

div
{
position:absolute;
bottom:130px;
left:30px;
width:100px;
height:100px;
background:red;
-webkit-transition:height 2s;     
}
Run Code Online (Sandbox Code Playgroud)

示例:http://jsfiddle.net/lukemartin/s9jEp/