Задержка анимации/поочередное выполнение в множественных @keyframes?

Question

[Джон Голт]

Есть две анимации, которые я хочу, чтобы выполнялись по очереди, а не одновременно, как это сделать ?

.cd-add{
  animation: translate 1s linear forwards,
             opacity 1s linear forwards;
}

@keyframes translate{
  0%{
    transform: translate(0, 0);
  }
  100%{
    transform: translate(0, 100px);
  }
}
@keyframes opacity{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

Answer 1

[Дмитрий Кравченко]

.cd-add{
  animation: translate-opacity 1s linear forwards;
}

@keyframes translate-opacity{
  0%{
    transform: translate(0, 0);
    opacity: 0;
  }
  50%{
    transform: translate(0, 100px);
    opacity: 0;
  }
  100%{
    opacity: 1;
    transform: translate(0, 100px);
  }
}

Comments

[Джон Голт]

Это должны быть две разные анимации.

[Дмитрий Кравченко]

тогда ставим одну анимацию на элемент, вторую - на его обертку

[Джон Голт]

Дмитрий Кравченко: так ну а если их несколько ? нет какого-то решения для того чтобы задать в элементе задержку для разных анимаций ?

[Дмитрий Кравченко]

Джон Голт: дело в том, что элемент не может иметь несколько анимаций

[Джон Голт]

Дмитрий Кравченко: не знал .. спасибо.

[Джон Голт]

Дмитрий Кравченко: но я имелл веду другое: можно ли в одной анимации, которую мы передаем элементу, которая включает себя несколько @keyframes, выполнять их с задержкой ? то есть указать задержку не для самой анимации в целом, а для ее вложенных @keyframes

[Дмитрий Кравченко]

Джон Голт: это можно реализовать через transition, там такая запись сработает. А запускать скриптом - добавлять нужный класс

[Дмитрий Кравченко]

Джон Голт: анимация не может включать несколько @keyframes

Answer 2

[vvvadimos]

есть свойство animation-delay, возможно вы его искали
htmlbook.ru/css/animation-delay

Comments

[Джон Голт]

Да ну нет же !(( Разумеется я знаю о делее, но оно задается для всей анимации в целом, а мне нужно разобраться, как сделать разные дилеи для ее компонентов в примере выше, если это возможно конечно.

[vvvadimos]

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