"进入"和"返回"状态的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;
}