<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