Css animacja w innym czasie

Question

Witam, chciałbym się dowiedzieć czy do tego kodu trzeba wykonać wiele keyframes, jeżeli chcę żeby to robiło się w innym czasie, czyli jeden tekst skaluje się przez np 2 sekundy a następny po nim przez kolejne 2  i czy da się to zrobić za pomocą jednego keyframes. Nie chciałbym do tego używaj JS.

KOD : https://codepen.io/AgentTecza/pen/OJRpPVW

Answer 1

Przy ustawieniu parametru animation możesz sprecyzować opóźnienie rozpoczęcia. Czyli możesz tylko drugiemu elementowi dać parametr animation-delay: 1s;

Answer 2

<p class="fade">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut volutpat arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec consequat justo. Nulla turpis risus, convallis vel tempor non, cursus at velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ultricies purus quis urna accumsan, ac tempus lacus luctus. Nam vel magna a sem consequat commodo. Donec vitae nunc tempor, euismod massa a, suscipit sem. Sed a porta ante, nec congue massa. Cras lorem lacus, semper sit amet quam sit amet, sagittis venenatis ex. Curabitur auctor ac neque et ullamcorper. Pellentesque magna risus, consectetur vel massa quis, porta efficitur massa. Ut porta orci pharetra, ultrices mi vitae, hendrerit purus. Nulla accumsan mauris et tincidunt ullamcorper.
</p><!-- nth-child(1) -->
<p class="fade">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut volutpat arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec consequat justo. Nulla turpis risus, convallis vel tempor non, cursus at velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ultricies purus quis urna accumsan, ac tempus lacus luctus. Nam vel magna a sem consequat commodo. Donec vitae nunc tempor, euismod massa a, suscipit sem. Sed a porta ante, nec congue massa. Cras lorem lacus, semper sit amet quam sit amet, sagittis venenatis ex. Curabitur auctor ac neque et ullamcorper. Pellentesque magna risus, consectetur vel massa quis, porta efficitur massa. Ut porta orci pharetra, ultrices mi vitae, hendrerit purus. Nulla accumsan mauris et tincidunt ullamcorper.
</p><!-- nth-child(2) -->
<p class="fade">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut volutpat arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec consequat justo. Nulla turpis risus, convallis vel tempor non, cursus at velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ultricies purus quis urna accumsan, ac tempus lacus luctus. Nam vel magna a sem consequat commodo. Donec vitae nunc tempor, euismod massa a, suscipit sem. Sed a porta ante, nec congue massa. Cras lorem lacus, semper sit amet quam sit amet, sagittis venenatis ex. Curabitur auctor ac neque et ullamcorper. Pellentesque magna risus, consectetur vel massa quis, porta efficitur massa. Ut porta orci pharetra, ultrices mi vitae, hendrerit purus. Nulla accumsan mauris et tincidunt ullamcorper.
</p><!-- nth-child(3) -->
<p class="fade">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut volutpat arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec consequat justo. Nulla turpis risus, convallis vel tempor non, cursus at velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ultricies purus quis urna accumsan, ac tempus lacus luctus. Nam vel magna a sem consequat commodo. Donec vitae nunc tempor, euismod massa a, suscipit sem. Sed a porta ante, nec congue massa. Cras lorem lacus, semper sit amet quam sit amet, sagittis venenatis ex. Curabitur auctor ac neque et ullamcorper. Pellentesque magna risus, consectetur vel massa quis, porta efficitur massa. Ut porta orci pharetra, ultrices mi vitae, hendrerit purus. Nulla accumsan mauris et tincidunt ullamcorper.
</p><!-- nth-child(4) -->

@keyframes fade_in_effect {
  0% {
    transform: scale(0.8);
    opacity: 0;
  } 
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.fade {
  opacity: 0;
  animation-name: fade_in_effect;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
/*
p:nth-child(1) { animation-delay: 0s; } // domyślnie
*/
p:nth-child(2) {
  animation-delay: 2s;
}
p:nth-child(3) {
  animation-delay: 4s;
}
p:nth-child(4) {
  animation-delay: 6s;
}

Codepen