????? ? ????? ??? ??? ??? ??? ?? ????? ??? ???? Nth-Child () ?? CSS ??? ?? ??? ???? ??? ??? ??? ??? ???? ????. 1. ?? : nth-child () ? ?? ??? ?? ?? ????? ??? ?? ???? ???? ?? ??? ??? ?????. 2. html?? ?? ??? ???? ???? ?? -i ? -??? ?? CSS ??? ?? ??? ???? ?? ?? ???? ??????. 3. ? ????? ??? calc ()? ?? ???? ?? ? ? ????. 4. ?? ??? 0.1s?? 0.2s ???? ?? ??? ???? ?? ???? ???? ?? ?? ????? ???? ?? ??? ????? ?? ????. ? ??? ?? ? ???? ???? ???? ????.

CSS? ???? ?? ??? ????? ??? ??? ?? ?? ?? ?? ??? ?? ????? ??? ????? ?? ??? ???? ??????? ?? ?????. ??? ????? ????? ??, ?? ?? ???? ???? ?????. ???? ????? ???? ??? ??? ????.

:nth-child() ?? CSS ??? ?? ??? ???? animation-delay ??????

?? ??? ??? ??? ??? ?????? ?? ??? ????? animation-delay ???? ?? ??? ???? ? ???. :nth-child() ?? CSS ??? ?? ?? (??)? ???? ???? ???? ?? ? ? ????.

?? 1 : ?? ?? :nth-child()

?? ??? ??? ?????.

 <ul class = "Stagger-List">
  <li> ?? 1 </li>
  <li> ?? 2 </li>
  <li> ?? 3 </li>
  <li> ?? 4 </li>
  <li> ?? 5 </li>
</ul>

??? ???? ??? ? ?????? ??????.

 @keyframes fadein {
  ?? {
    ???? : 0;
    ?? : Translatey (10px);
  }
  ?? {
    ???? : 1;
    ?? : Translatey (0);
  }
}

.Stagger-list li {
  ???? : 0;
  ????? : Fadein 0.5S? ???;
}

.Stagger-list li : nth-Child (1) {?????-?? : 0.1s; }
.Stagger-list li : nth-Child (2) {?????-?? : 0.2s; }
.Stagger-list li : nth-Child (3) {?????-?? : 0.3s; }
.Stagger-list li : nth-Child (4) {?????-?? : 0.4s; }
.Stagger-list li : nth-Child (5) {?????-?? : 0.5s; }

??? ? ??? ?? ? ? ??? ???? ??? ?? ??? ??? ????.

? ???? ?? ????? ???? ??? ? ??? ?? transform ??? ? ????.

? ?? 2 : CSS ??? ?? ??? ??? ?? ? ??

? ?? ??? (?? ?? ??? ??)? ?? CSS ??? ???? ??? ??????.

 .Stagger-list li {
  -?? : calc (var (-i, 1) * 0.1s);
  ???? : 0;
  ????? : Fadein 0.5S Exece Forwards var (-??);
}

?? ?? html?? ?? <li> ? --i ?????.

 <li style = "-i : 1"> ?? 1 </li>
<li style = "-i : 2"> ?? 2 </li>
<li style = "-i : 3"> ?? 3 </li>
<li style = "-i : 4"> ?? 4 </li>
<li style = "-i : 5"> ?? 5 </li>

?? ??? ??? ?? ????? ?? ??? ??? ??? ? ? ????.

?? ?? ?

<li> ??? ???? ?????? : ?? ??? 0.1 ~ 0.2s? ????? ???? ????.<li> animation-fill-mode ?? forwards ???? ????? ?? ??? ?????.<li> ??? ??? ?? opacity , transform ?? clip-path ? ??????.<li> ?? ? ????? ?? ?? ??? ??? ?? ??? ??? ??? ?? ??????.

? ??? : ??

??? ???? ??? ??????.

 .Stagger-list li {
  -?? : 5; / * ? ?? */
  --reverse-delay : calc ((var (-Total)-var (-i)) * 0.1s);
  ????? : Fadein 0.5S Ease Forwards var (-??? ??);
}

?? ??? ??? ?? ????????.

????? ?? ??? ?????? ?? ??? ? ?? ????. ???? :nth-child() ?? CSS ??, ????? ?????. ? ?????? ?? ?????? . ? ?? ??? ? ? ???? ?? ????? ?? ?? ? ? ????.

???? ????. ??????? ???? ???? ???? ?? ??????? ?????.

? ??? CSS? ?? ??? ????? ??? ??? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!