Animation delay / sequencing across multiple @keyframes?

Question

css

There are two animations that I want to run in sequence, not at the same time, how do I do that?

.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);
  }
}

Answer 2

there is an animation-delay property, maybe you were looking for it
htmlbook.ru/css/animation-delay