css3 simple animate with transform and transition, a sudden jump at conclusion?

I have a simple anim开发者_开发百科ation like this:

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

When I hover, it scales correctly. But just when it was about to finish, it suddenly pops back to the former size and then snaps to the completed scaled up version.

How do I fix this?

You have it a little bit wrong, you have to set the attributes a little differently:

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

You need to set the animation attributes on the element itself, and then the action on the hover :)

Working example (Webkit browsers only).