css - 带有变换和过渡的 css3 简单动画，结尾突然跳跃？

Question

我有一个像这样的简单动画：

.elem:hover {
-webkit-transform: scale(1.3);
-webkit-transition: all .4s;
}

当我悬停时，它会正确缩放。但就在它即将完成时，它突然弹回原来的大小，然后捕捉到完成的放大版本。

我该如何解决？

Answer 1

你有一点错误，你必须设置一些不同的属性：

.elem { -webkit-transition: all .4s ease-in-out; }
.elem:hover { -webkit-transform: scale(1.3); }

您需要在元素本身上设置动画属性，然后在悬停时设置动作:)

工作示例（仅限 Webkit 浏览器）。