Несколько анимаций ключевого кадра CSS с использованием свойства преобразования не работают

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

.element {
    animation: animate1 1000ms linear infinite,
               animate2 3000ms linear infinite;
}

Если обе анимации ожидают использование свойства transform, только последний запускается через каскадирование. Но если анимация @keyframes позволяет сказать один margin или display или какой-либо другой атрибут css, а другой использует transform, то они оба запускаются.

вот пример кода с соответствующим кодом ниже.

CSS

@keyframes move {
    0%, 100% { transform: translateX(0px); }
    50% { transform: translateX(50px); }
}
@keyframes skew {
    0%, 100% { transform: skewX(0deg); }
    50% { transform: skewX(15deg); }
}
@keyframes opacity {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

.taco {
    animation: skew 2000ms linear infinite,
               opacity 4000ms linear infinite;
}

В верхней части они запускают

.burger {
    animation: skew 2000ms linear infinite,
               move 4000ms linear infinite;
}

В приведенном выше примере только триггеры (через каскадные) - почему?

У кого-нибудь есть решение для этого без использования js? Или это то, что просто не работает? Пример довольно прост, и я знаю, что я мог бы объединить анимации в один и не объявлять оба, но это был тест для более сложной анимации, над которой я работал.

спасибо

Ответ 1

Вы не можете анимировать один и тот же атрибут (здесь преобразовать атрибут) более одного раза, на одном и том же элементе, последний будет перезаписывать другие,

Вы должны поместить свой целевой элемент в div и применить одну трансляционную анимацию к div и другой анимации преобразования в целевом элементе....

.div_class
{
    animation:animate1 1000ms linear infinite;
}

.element
{     
   animation:animate2 3000ms linear infinite;
}

Ответ 2

По той же причине, что

transform: skewX(45deg);
transform: translateX(4em);

не будет искажать элемент, но будет только перемещать его. И если вы хотите как перекосить, так и переместить его, вам нужно связать их transform: skewX(45deg) translateX(4em)

Вам нужно будет сделать что-то вроде

@keyframes t {
    25% { transform: skewX(15deg); }
    50% { transform: skewX(0deg) translateX(50px); }
    75% { transform: skewX(15deg); }
}

Вам не нужно явно указывать 0% и 100% ключевые кадры - они будут автоматически сгенерированы - см. спецификацию CSS Animations.

И затем вы можете использовать

animation: t 4000ms linear infinite,
        opacity 4000ms linear infinite;

Еще одна вещь, о которой вы должны быть осторожны: skewX(angleValue) translateX(lengthValue) оказывается таким же, как translateX(lengthValue) skewX(angleValue). Однако в большинстве случаев порядок, в котором вы применяете, имеет значение. Вы получите разные результаты для skewX(angleValue) translateY(lengthValue) и translateY(lengthValue) skewX(angleValue).

Ответ 3

@StephanMuller jsfiddle - это в значительной степени ответ, этот синтаксис сработал у меня http://jsfiddle.net/j83m5ha5/4

div {
background:green;
width:100px;
height:100px;
-webkit-animation: in 2s 200ms  forwards, out 1s 2200ms forwards;
}

Я считаю, что ОП задал вопрос под рукой, потому что он хотел стандартизировать свои анимации и просто применять их по мере необходимости, взять этот недавний код практики из моих классов: https://jsfiddle.net/kgLc56w4/

#b15{
top:200px;
left:200px;
background:#ff3399;
-webkit-animation: r4 ease-in-out 2s forwards 24s, s4 ease-in-out 2s forwards 30s;
}

Каждый блок перемещается только в одном направлении, поэтому вместо того, чтобы делать грубую работу по созданию 15 анимаций, я просто использовал более простой 8. Я знаю, что это могло быть сделано намного проще, но это не было целью практика.

Что я изменил, я использовал синтаксис Stephan для последнего 15-го элемента, чтобы переместить его еще раз, и он работает.

Вам просто нужно быть осторожным с таймингами, в случае Стивена, если вы увеличиваете продолжительность 1-й (в) анимации, вам нужно увеличить задержку 2-го (out).

Пример:

-webkit-animation: in 20s 200ms  forwards, out 1s 20200ms forwards;

Надеюсь, это поможет!