Задержка анимации элементов слайдера

Question

Я хочу сделать слайдер изображений со сдвигающимися вверх текстами и кнопкой. Я хочу, чтобы элементы выглядели отложенными, но они не работают, сначала загружаются все элементы, а затем запускается анимация.

Вот мой код скрипка

@keyframes slide-up {
  from {
    padding-top: 100px;
    opacity: 0;
  }
  to {
    padding-top: 0;
    opacity: 1;
  }
  .slide-heading {
    font-size: 50px;
    font-weight: 900;
    margin: 0 0 30px 0;
    width: 50%;
    animation: slide-up 1s;
    animation-iteration-count: 1;
    animation-delay: 1s;
  }
  .slide-text {
    line-height: 1.75;
    font-size: 13px;
    font-weight: 300;
    width: 50%;
    margin: 0 0 60px 0;
    animation: slide-up 1s;
    animation-iteration-count: 1;
    animation-delay: 2s;
  }
  .slide-btn {
    animation: slide-up 1s;
    animation-iteration-count: 1;
    animation-delay: 3s;
  }
}

<div class="slide-heading">Lorem Ipsum </div>
<div class="slide-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis est metus, ac viverra quam rutrum vitae. Phasellus eget egestas arcu. Nulla porttitor at justo egestas ornare. </div>
<div class="slide-btn"><button class="btn btn-primary" type="submit">More</button></div>

Answer 1

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

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');

     .slide-heading {
        font-size: 50px;
        font-family: 'Roboto', sans-serif;
        font-weight: 900;
        margin: 100px 0 30px 0;
        width: 75%;
        animation: slide-up 2s;
        animation-iteration-count: 1;
        animation-delay: 1s;
      }
      .slide-text {
        line-height: 1.75;
        font-family: 'Roboto', sans-serif;
        font-size: 13px;
        font-weight: 300;
        width: 60%;
        margin: 0 0 60px 0;
        animation: slide-up 5s;
        animation-iteration-count: 1;
        animation-delay: 1s;
      }
      .slide-btn {
        font-family: 'Roboto', sans-serif;
        animation: slide-up 5s;
        animation-iteration-count: 1;
        animation-delay: 1s;
      }
@keyframes slide-up {
  from {
      transform: translateY(100px);
      opacity: 0;
  }
  to {
    transform: translateY(0);
      opacity: 1;
  }
}

<div class="slide-heading">Lorem Ipsum </div>
<div class="slide-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis est metus, ac viverra quam rutrum vitae. Phasellus eget egestas arcu. Nulla porttitor at justo egestas ornare. </div>
<div class="slide-btn"><button class="btn btn-primary" type="submit">More</button></div>

Работает, я проверил. Надеюсь, это поможет вам.

Answer 2

Смешанные предложения работают, спасибо @Farhan Ali и @ mkasp98

@keyframes slide-up {
  from {
      transform: translateY(100px);
      opacity: 0;
  }
  to {
    transform: translateY(0);
      opacity: 1;
  }
}
.slide-heading {
    font-size: 50px;
    font-weight: 900;
    margin: 0 0 30px 0;
    width: 50%;
    animation: slide-up 1s;
    animation-fill-mode: backwards;
    animation-iteration-count: 1;
    animation-delay: 1s;
  }
.slide-text {
    line-height: 1.75;
    font-size: 13px;
    font-weight: 300;
    width: 50%;
    margin: 0 0 60px 0;
    animation: slide-up 1s;
    animation-fill-mode: backwards;
    animation-iteration-count: 1;
    animation-delay: 2s;
  }
.slide-btn {
    animation: slide-up 1s;
    animation-fill-mode: backwards;
    animation-iteration-count: 1;
    animation-delay: 3s;
}



    <div class="slide-heading">Lorem Ipsum </div>
    <div class="slide-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis est metus, ac viverra quam rutrum vitae. Phasellus eget egestas arcu. Nulla porttitor at justo egestas ornare. </div>
    <div class="slide-btn"><button class="btn btn-primary" type="submit">More</button></div>

Answer 3

Добавить animation-fill-mode: backwards;

CSS анимации не влияют на элемент до воспроизведения первого ключевого кадра или после воспроизведения последнего ключевого кадра. Свойство animation-fill-mode может переопределить это поведение.

backwards ---> Элемент получит значения стиля, заданные первым ключевым кадром (зависит от анимации-направления), и сохранит его во время период задержки анимации

https://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp

Попробуйте:

@keyframes slide-up {
  from {
    padding-top: 100px;
    opacity: 0;
  }
  to {
    padding-top: 0;
    opacity: 1;
  }
  .slide-heading {
    font-size: 50px;
    font-weight: 900;
    margin: 0 0 30px 0;
    width: 50%;
    animation: slide-up 1s;
    animation-fill-mode: backwards;
    animation-iteration-count: 1;
    animation-delay: 1s;
  }
  .slide-text {
    line-height: 1.75;
    font-size: 13px;
    font-weight: 300;
    width: 50%;
    margin: 0 0 60px 0;
    animation: slide-up 1s;
    animation-fill-mode: backwards;
    animation-iteration-count: 1;
    animation-delay: 2s;
  }
  .slide-btn {
    animation: slide-up 1s;
    animation-fill-mode: backwards;
    animation-iteration-count: 1;
    animation-delay: 3s;
  }
}

надеюсь, что это поможет