“进入”和“返回”状态的css3转换时间不同

Question

我正在尝试使用css3过渡来淡化元素的不透明度（http://www.w3schools.com/cssref/css3_pr_transition-duration.asp）。

例如，我说：

-webkit-transition: opacity 2s ease-in-out; 

有没有办法指定与2s不同的“返回原始状态”时间？

我想在2秒钟内降低不透明度，但是会在0.5秒内恢复。

CSS3 Transition: Different transition for *IN* and *OUT* (or returning from transitioned state)似乎可以实现这一点，但使用多个元素。有更好的方法吗？

Answer 1

是的，还有更好的方法 - http://jsfiddle.net/bJKpu/

为正常和悬停状态指定不同的transition-duration - s：

div {
    height: 200px;
    width: 200px;
    background: orange;
    opacity: .5;
    -webkit-transition: all .5s ease-in-out;
       -moz-transition: all .5s ease-in-out;
}


div:hover {
    opacity: 1;
    height: 300px;
    width: 300px;
    -webkit-transition: all 2s ease-in-out;
       -moz-transition: all 2s ease-in-out;
}