How to scale and translate3d at the same time?

Question

Take this example:

@-webkit-keyframes slideInViewport {
    from{
        -webkit-transform: scale(1);
        -webkit-transform: translate3d(0, 0, 0);
    }
    to{
        -webkit-transform: scale(0.8);
        -webkit-transform: translate3d(250px, 0, 0)
    }
}

This results in the div first translating 250px to the left and then scaling. How can I make it translate3d at the same time it is scaling?

I have achieved this animating on the left property, but that results in very poor performance.

Answer 1

The solution is: put them all in one line.

@-webkit-keyframes slideInViewport {
    from{
        -webkit-transform: scale(1) translate3d(0, 0, 0);
    }
    to{
        -webkit-transform: scale(0.8) translate3d(250px, 0, 0);
    }
}