css3のアニメーション

Question

私は、ホバリングのcss3でアニメーション化しているdivを持っています。アニメーションはうまくいくが、マウスがdivを離れると、元の位置にアニメーションを付ける代わりに元の位置にスナップする。ここに私のコードは次のとおりです。

#middlesection:hover { 
    -moz-transform: scale(2.16,2.5) rotate(0deg) translate(0, -53px) skew(0deg, 0deg); 
-webkit-transform: scale(2.16,2.5) rotate(0deg) translate(0, -53px) skew(0deg, 0deg); 
-o-transform: scale(2.16,2.5) rotate(0deg) translate(0, -53px) skew(0deg, 0deg); 
-ms-transform: scale(2.16,2.5) rotate(0deg) translate(0, -53px) skew(0deg, 0deg); 
transform: scale(2.16,2.5) rotate(0deg) translate(0, -53px) skew(0deg, 0deg); 
transition-duration: .5s; 
-moz-transition-duration: .5s; /* Firefox 4 */ 
-webkit-transition-duration: .5s; /* Safari and Chrome */ 
-o-transition-duration: .5s /* Opera */ 
} 

何私はそれが戻ってアニメーション化させるだけではなくスナップバックするように変更する必要がありますか？

Answer 1

だけではなく、移行期間の遷移ショートカットを使用して試してみて、イージング関数を含める：

-webkit-transition: -webkit-transform 0.5s ease-in-out; 
-moz-transition: -moz-transform 0.5s ease-in-out; 
-o-transition: -o-transform 0.5s ease-in-out; 
transition: transform 0.5s ease-in-out;