Question

我有一个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 */
}

我需要更改什么才能使其恢复活力而不是仅仅回弹？

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;

动画在css3中

1 个答案: