Как запустить одну анимацию за другой?

Question

* {
  margin: 0;
  padding: 0;
}

.h {
  animation: anim1 400ms linear 1 forwards;
  margin-left: -500px;
}

@keyframes anim1 {
  from {
    margin-left: -500px;
  }
  to {
    margin-left: 0px;
  }
}

.c2 {
  animation: anim2 1s linear 1 forwards;
  margin-left: -2000px;
}

@keyframes anim2 {
  from {
    margin-left: -2000px;
  }
  to {
    margin-left: 0px;
  }
}

<h1 class="h">Lorem Ipsum Header</h1>
<h1 class="c2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>

Нужно, чтобы сначала выезжал первый заголовок, а вслед за ним - второй. Как это сделать?

Answer 1

Используйте в данном случае animation-delay:

* {
  margin: 0;
  padding: 0;
}

.h, .c2 {
  width: 100%;
  margin-left: -100%;
  animation: anim .7s linear forwards;
}

.c2 {
  animation-delay: 1.4s;
}

@keyframes anim {
  to {
    margin-left: 0;
  }
}

<h1 class="h">Lorem Ipsum Header</h1>
<h1 class="c2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>

БЛОГ НА HUSL

Как запустить одну анимацию за другой?

Ответы (1 шт):