How to scale and translate 3D 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 causes the div to first move 250px to the left and then scale. How can I make it translate3d at the same time as scaling?

I achieved this animation in the property left, but this leads to very poor performance.

Answer 1

Solution: put them on one line.

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