css анимация масштаб не работает

Question

Я создаю анимацию с ключевыми кадрами css. у меня есть это:

@keyframes experience { 
0% { 
-webkit-transform: scale(0,0); 
     transform: scale(0,0); 
-webkit-transform: translateY(40px); 
     transform: translateY(40px); 
opacity: 1; 
} 
60% { 
-webkit-transform: scale(1,1); 
     transform: scale(1,1); 
-webkit-transform: translateY(40px); 
     transform: translateY(40px); 
opacity: 1; 
} 
100% { 
-webkit-transform: translateY(0px); 
     transform: translateY(0px); 
opacity: 1; 
} 
} 

Все работает для свойства Scale масштабирует его в одном, кроме идти вместо анимировать. Я работаю с Jquery плагин путевых точек и DIV имеет класс

.workitem { 
    position: relative; 
    width: 1000px; 
    height: 200px; 
    background-color: #333; 
    margin: 0 auto; 
    opacity: 0; 
    -webkit-transform: scale(0); 
     transform: scale(0); 
} 

Когда хиты вэйпоинтов я добавить класс

.experience { 
    -webkit-transform: scale(0); 
      transform: scale(0); 
    -webkit-animation: experience 2s ease-in forwards ; 
      animation: experience 2s ease-in forwards ; 
} 

который использует выше анимацию.

Answer 1

Это потому, что вы на самом деле подменяют scale преобразования .. брать посмотрите на следующий CSS:

transform: scale(0,0); 
    transform: translateY(40px); 

Это было бы то же самое, установив что-то вроде этого:

color: red; 
    color: blue; 

В этом случае вы ожидаете, что свойство вашего элемента color будет blue, так как это правило стиля второе и отменяет значение для red.

Это то же самое с transform, хотя вы используете различные типы преобразований, они по-прежнему имеют одинаковую собственность transform.

Вы видите резкий прыжок, потому что вы начинаете с него scale(0,0), но как только начинается анимация, вы теперь только переводите элемент, а не масштабируете, чтобы он немедленно возвращался к нормальной жизни.

Вы можете обойти эту проблему, объявив свои стили, как это, вместо того, чтобы:

transform: scale(0,0) translateY(40px); 

И очевидно, добавив во всех ваших правильного поставщика префиксов оттуда!

Answer 2

Использование

@-webkit-keyframes 

Webkit использует префикс для ключевых кадров тоже. Полный пример:

@keyframes anim{ 
    to{transform:rotate(30deg);} 
} 
@-webkit-keyframes anim{ 
    to{-webkit-transform:rotate(30deg);} 
} 
#element{ 
    animation:anim; 
    -webkit-animation:anim; 
} 

Примечание: Я использовал преобразование, потому что я хотел показать, что префиксы используются в Префиксальный версии ключевых кадров только