2

* {
  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>

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

0

1 ответ 1

3

Используйте в данном случае 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>

1
  • 1
    Интересная мысль, красивое решение. Одна и та же анимация применена к двум объектам, но во втором применении в анимацию вносится задержка 17 дек 2021 в 6:52

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.