css3中的动画制作

我有一个div，我正在用css3制作悬停动画。动画进展顺利，但当我的鼠标离开div时，它会捕捉回其原始位置，而不是将ack设置为其原始位置。这是我的密码：

#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 */
}

---

我需要做哪些更改才能使其变回动画，而不仅仅是快照？

尝试使用过渡快捷方式，而不仅仅是过渡持续时间，并包括一个缓和功能：

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