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

关于css - 在CSS3中制作动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7029878/