Цепной преобразования анимации не анимировать

Question

Во время работы с анимацией, я наткнулся на незарегистрированной и неожиданное поведение:

При объединении анимации с помощью преобразования (любое преобразование собственности, и только свойство преобразования), то первая анимация будет ожидаемое поведение перехода из состояния A в состояние B, тогда как второе будет просто переходить от B к C без какого-либо перехода.

div { 
 
    background:red; 
 
    width:100px; 
 
    height:100px; 
 
    -webkit-animation: in 2s, out 2s 3s forwards; 
 
    animation: in 2s, out 3s 2s forwards; 
 
} 
 
@keyframes in { 
 
    from { 
 
     transform: scale(0); 
 
    } 
 
    to { 
 
     transform: scale(1); 
 
    } 
 
} 
 
@keyframes out { 
 
    from { 
 
     transform: scale(1); 
 
    } 
 
    to { 
 
     transform: scale(.5); 
 
    } 
 
} 
 
@-webkit-keyframes in { 
 
    from { 
 
     -webkit-transform: scale(0); 
 
    } 
 
    to { 
 
     -webkit-transform: scale(1); 
 
    } 
 
} 
 
@-webkit-keyframes out { 
 
    from { 
 
     -webkit-transform: scale(1); 
 
     
 
    } 
 
    to { 
 
     -webkit-transform: scale(.5); 
 
    } 
 
}

<div></div>

Я знаю, что в данном конкретном случае, все может быть сделано в один шаг, но это не решение я ищу

Как я могу решить это с помощью CSS только?

ОБНОВЛЕНИЕ: Кажется, что все работает отлично в firefox, может ли это быть хромной ошибкой?

ОБНОВЛЕНИЕ 2: добавлена ​​префикс бесплатной анимации по запросу; Не сильно меняется.

Answer 1

Это еще один Chrome делает ошибку.

Похоже, что обходным решением является добавление какого-либо другого свойства, которое не имеет значения, чтобы он узнал, что анимация, похоже, происходит. В этом случае я добавил строку, которая задает фон по умолчанию на into. Это нужно сделать только для анимации ключевого кадра -webkit-.

Фактическое исправление в вашем проекте может потребовать изменения или изменения какого-либо объекта или добавления его в другое место. Я не могу знать, не испытывая себя.

div { 
 
    background:red; 
 
    width:100px; 
 
    height:100px; 
 
    -webkit-animation: in 2s, out 2s 3s forwards; 
 
    animation: in 2s, out 3s 2s forwards; 
 
} 
 
@keyframes in { 
 
    from { 
 
     transform: scale(0); 
 
    } 
 
    to { 
 
     transform: scale(1); 
 
    } 
 
} 
 
@keyframes out { 
 
    from { 
 
     transform: scale(1); 
 
    } 
 
    to { 
 
     transform: scale(.5); 
 
    } 
 
} 
 
@-webkit-keyframes in { 
 
    from { 
 
     -webkit-transform: scale(0); 
 
    } 
 
    to { 
 
     -webkit-transform: scale(1); 
 
     background:red; 
 
    } 
 
} 
 
@-webkit-keyframes out { 
 
    from { 
 
     -webkit-transform: scale(1); 
 
     
 
    } 
 
    to { 
 
     -webkit-transform: scale(.5); 
 
    } 
 
}

<div></div>

Боковые ноты:

• использовать точку с запятой - не делая так, вы делаете все участвующие в жизни труднее без причины.
• Используйте хорошее форматирование - то же причина, что и выше
• Вы don't need to использовать -moz- для animation или transform (там нет-moz-transform)
• положенных в без префикса версии свойств после Префиксальных них - вы хотите, чтобы они используйте более стандартную версию, когда это возможно - поскольку CSS - это , каскадирующий, что означает, что после этого он будет помещен в это место.

Answer 2

Смотрите эту http://jsfiddle.net/khanamiryan/3p3x7v1f/2/

@-webkit-keyframes inout { 
    0% { 
     -webkit-transform: scale(0) 
    } 
    50% { 
     -webkit-transform: scale(1) 
    } 
    100% { 
     -webkit-transform: scale(.5) 
    } 
}