css - 「into」状態と「return」状態の異なるcss3遷移時間

Question

要素の不透明度を下げるためにcss3トランジションを使用しようとしています（http://www.w3schools.com/cssref/css3_pr_transition-duration.asp）。

たとえば、私は言います：

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

2秒とは異なる「元の状態に戻る」時間を指定する方法はありますか？

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