Во время работы с анимацией ключевого кадра 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? Или это то, что просто не работает? Пример довольно прост, и я знаю, что я мог бы объединить анимации в один и не объявлять оба, но это был тест для более сложной анимации, над которой я работал.
спасибо
Вы не можете анимировать один и тот же атрибут (здесь преобразовать атрибут) более одного раза, на одном и том же элементе, последний будет перезаписывать другие,
Вы должны поместить свой целевой элемент в div и применить одну трансляционную анимацию к div и другой анимации преобразования в целевом элементе....
.div_class
{
animation:animate1 1000ms linear infinite;
}
.element
{
animation:animate2 3000ms linear infinite;
}
По той же причине, что
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).
@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;
Надеюсь, это поможет!