How to scale and translate3d at the same time?

animation, css

Solution

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);
    }
}

Problem

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.

Original source