CSS3 webkit-transition с использованием нескольких свойств div и нескольких webkit-transition-delay

Question

Я пытаюсь преобразовать div, сдвинув его на 200px вправо, а затем уменьшив его масштаб вдвое. Я бы хотел сдвинуть ТО, чтобы уменьшить масштаб div, однако я не могу заставить 2 преобразования работать независимо, они скользят и масштабируются одновременно. Я думал, что webkit-transition-delay решит эту проблему, но он применяет только последнюю указанную задержку (в этом примере 2) к обоим преобразованиям. Какие-нибудь мысли?

.example-3-transform {
            -webkit-transform: translate(200px) scale(0.5);
            -webkit-transition-property: webkit-transition-translate, webkit-transition-scale;
            -webkit-transition-duration: 1s, 1s;
            -webkit-transition-timing-function: ease-in-out, ease-in-out; 
            -webkit-transition-delay: 0s, 2s;
}

Answer 1

Для этого можно использовать ключевой кадр:

@-webkit-keyframes myanim {

  50% { -webkit-transform: translate(200px) scale(1) }
  100% { -webkit-transform: translate(200px) scale(0.5) }

}

.example-3-transform { -webkit-animation: myanim 5s 1 ease-in-out forwards }

Параметры:

• 5 с: продолжительность анимации
• 1: повтор
• easy-in-out: алгоритм синхронизации, также может быть линейным, easy-in, ease-out или cubic-bezier с пользовательскими параметрами
• forward: будет поддерживать стиль в желаемом состоянии после завершения анимации.