Safari -webkit-transition-property : animating scale and/or background-size

Question

I'd like to animate a couple of divs with background images. I want them to move position on the page and get larger.

I'm doing this via jQuery by adding a class that, in turn, will trigger Webit's CSS3 transforms.

I started with this:

.myStyle {
    width: 240px;
    height: 240px;
    top: 200px;
    -webkit-background-size: 240px;
    -webkit-transition-property: top, -webkit-background-size, width, height;
    -webkit-transition-duration: 1s;
}

When adding that style, the DIV changes width and height, moves to the new top position, but the background size remains the same.

So then I tried this:

.myStyle {
    top: 200px;
    -webkit-transform: scale(1.5);
    -webkit-transition-property: top, -webkit-transform;
    -webkit-transition-duration: 1s;

}

But, same problem. Top animates, but not the scale.

I think (hope) that this is merely a syntax error on my part. Or is it just not possible to transition -webkit properties?

The common quote (that I can't seem to find a reference to) that says "if you think you've found a bug in the compiler check your code again, you probably didn't" ~ I don't think you found an issue with Webkit but it'll be interesting if you did. — jcolebrand

methodofaction methodofaction · Accepted Answer · 2011-03-09T07:55:34

The first code doesn't work because webkit can't animate from one unit dimension (%) to another (px). If you change...

.myStyle {
    -webkit-background-size: 150%;
}

It should animate, but going from 0 to 100%. A similar thing is happening in your second example, I think.

I'd go about simplifying the code and placing the transition declaration before doing the transformation. This allows the element to reverse the transition if you remove the class. Also, if you are scaling things uniformly then -webkit-transform: scale is the way to go.

#div {
  /*your css*/
  -webkit-transition: all 1s ease;
}

#div.animated {
  -webkit-transform: -webkit-transform: scale(1.5);
}

Safari -webkit-transition-property : animating scale and/or background-size

1 Answers