Как масштабировать и Translate3D одновременно?

Question

Возьми этот пример:

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

.

Это приводит к первой переводю 250 пикселей влево, а затем масштабируется.Как я могу сделать это Translate3D одновременно оно масштабируется?

Я достиг этого анимации на свойство left, но это приводит к очень плохой производительности.

Answer 1

Решение: поставить их все в одну строку.

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

.