Zoom versus -transform scale

Question

I ran into this while developing a scaling effect onHover for one of my sites.

When you have transition durations set for CSS pseudo states, setting the zoom property will scale the element onHover, but as soon as it reaches it's max size, it shrinks back down to a smaller size (but this size is still bigger than the original).

However, when using the x-transform: scale() property with the same transitions, the item scales smoothly (and maintains its center coordinate, I might add).

You can see this in this fiddle. The red box grows to the right and down but then jumps back to a smaller size while the blue one smoothly grows and stays the full size.

Why is this?

*
{
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

box:hover
{
    zoom: 1.1;
}

box2:hover
{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

Answer 1

zoom is not one of the supported animated properties.

What appears to be happening is this: The cursor enters the red box it instantly assumes the size of the zoom value. Then the transition kicks in and the zoom is applied for a 2nd time on the already-zoomed element. When the transition completes the box reverts to the original zoomvalue.

By stopping the animation after the transition (using an alert on transitionend I can measure the box and see it has a width of 121px (100px * 1.1 * 1.1). So the zoom does appear to be getting applied twice.

No idea why it behaves like this but since it's not a supported animated effect there's not a really an expected behavior.