?? ?????? ?????. ? ???? ???? ?? ?????? ???? ??? ??????. ??? ???? ????? ??? ????? ??? ? ??? ??? ?????. ?? ??, ??? ?????? ? ??? ??? ?????? ??? ? ??? ?? ?????? ??? ??? ?? ???????.

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

?? ??? ?????? ????? :nth-child Selector? ???? ??????. ?? ??? ?? ??? ????? (<ul></ul> ) ?? ??????, ???? ???? :nth-child ?? ???? ???? ? ?? ??? ?????? ????? animation-delay ??.

 .my-list li {
  ????? : My-Animation 300ms ???;
}

.my-list li : nth-Child (1) {
  ????? ?? : 100ms;
}

.my-list li : nth-Child (2) {
  ?????-?? : 200ms;
}

.my-list li : nth-Child (3) {
  ????? ?? : 300ms;
}

/* ?*/

? ??? ?? ??? ??? ??? ??? ?? ??? ??? ?? ?? ?? ? ?? ??? ? ?????. ???? ???? ?? ?? ??? ? ?? ? ????? (?? ??? ?? ?? ? ??? ??). ??? ?? ?? ?? ? ? ??? ??? ???? ?? ???? ? ??? ???? ?? ?? 50 ?? ??? ???? ????? ?? ??? ?? ? ??? ?? SASS ??? ??????.

 .my-list {
  Li {
    ????? : My-Animation 300ms ???;

    @for $ i?? 1 ~ 50 {
      & : nth-Child (#{$ i}) {
        ?????-?? : 100ms * $ i;
      }
    }
  }
}

??? ??? ???????! ??? ?? ??? ??? ???. ?? ??? ?? ?? ??? ????? ??? ??? ? CSS?? nth-child(45) ? ?? ?? ??? ???? ???? ??? ?? ????.

? ?? ??? ??????. ????? ?? ?? ????? ?? ??? ???? ?? JavaScript? ??? ????. ??? ???? CSS? ?? ? ? ??? ???? ? ??? ?????.

CSS ???? ??????

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

 .my-list {
  ??? ?? : ? ???;
}

.my-list li {
  ??? ?? : ? ???;
  ????? ?? : Calc (Counter (My-Counter) * 100ms);
}

????, ??? calc() ?? ???? ??? ? ??? ???? ??? ??? ???? ????.

calc() ???? ?? ??? ?? ?? ? ?? attr() ?? calc() ?? ? ? ????.

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

??? ??? ??????

???? ???? ?? ? calc() attr() ??? ? ??? ?? ???????. ??? CSS ? ? ?? ??? ?? :

CSS3?? attr() ???? ?? ?? ?? ??? ?? ?? ? ? ????.

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

• ?? 1
• ?? 2
• ?? 3
• ?? 4

.my-list li {
  ????? ?? : calc (attr (data-count) * 150ms);
}

???? ???? ??? ?? ??? ??? ?? ??? ??????!

? ????? Caniuse? ???? ???? ??? ??? ???? ????. ? ??? ???? ?? ?? ??? ??? ???? ???? ??? ????? ?? ?????.

????

???/??? PC

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

?? ??? ??????

?? ????? CSS? ???? ??? ??? ???? ????. ???? ??? ??????

??? ?? ????? ?? ??????. ?? ??, ?????? ?? ? ????.

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

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

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

? ????? Caniuse? ???? ???? ??? ??? ???? ????. ? ??? ???? ?? ?? ??? ??? ???? ???? ??? ????? ?? ?????.

????

???/??? PC

CSS? ?? ? ??? ??? ??? ???? ??? ??? ????? ????. ??? ?? ?? ????? ????? ? ??? ?????. ??? ???? ?? ?? ?? ??? ???? ?? ?????? ??? ? ????.

 .my-list li {
  ????? : ??-?????;
}

@Supports (variable) {
  .my-list li {
    ????? : ?? ?????;
    ????? ?? : calc (var (-animation-order) * 100ms);
  }
}

?? CSS LON LIVE

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

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