css - “进入”和“返回”状态的不同 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 过渡：*IN* 和 *OUT* 的不同过渡（或从过渡状态返回）似乎可以实现这一点，但使用多个元素。有更好的办法吗？

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;
}