CSS ?? ????? ?? ??? ???? ?? ?? ?? HTML ??? ?????? ? ???? DIV? ?? ? DOT ? ???? ?????. 2. Flexbox ???? ? ?? ??? ???? ?? ???? ??? @keyframes? ???? Fadeinup ?????? ???? ?? ? ?????? ?????. 3. ????? ??? ???? ??? ?? ??? ???? ????? ??? ???? ?? ??? ??? ??????. 4. ??? ???? ???? ?????? ???? ?? ??? ????, ?? ?? ? ?? ? ??? ??????? ?? ?????. 5. ?? ????? ???? ? ??? ???? ????? ??? ???? ?? ?? ??? ???? ??? ????? ????? ?? ?????. ????? JavaScript?? ???? ??? ???? ?? ??? ?? ? ??? ?? ??? ??????.

CSS ?? ????? ?? ??? ??? ?? JavaScript? ???? ?? ???, ??? ?? ????? ???? ??? ???? ?? ?????. ???? ?????? ??? ?????? HTML ? CSS ? ???? ??? ???? ??? ??? ????.

1. HTML ?? ? ??

?? ???? ??? HTML ??? ??????. ? ?? ?? ???? ?? ???? ???? ?? ?????? ????? ? ? ????.

 <div class = "?? ??">
  <div class = "?? ??-???">
    <div class = "?? ??-??"> </div>
    <div class = "?? ?? ???">
      <H3> ??? 1 </h3>
      <p> 2023 ? 1 ? </p>
      <p> ??? ?? ??? ? ?? ??????. </p>
    </div>
  </div>

  <div class = "?? ??-???">
    <div class = "?? ??-??"> </div>
    <div class = "?? ?? ???">
      <H3> ??? 2 </h3>
      <p> 2023 ? 3 ? </p>
      ??? ????? <p> ? ?? ? ???. </p>
    </div>
  </div>

  <div class = "?? ??-???">
    <div class = "?? ??-??"> </div>
    <div class = "?? ?? ???">
      <H3> ??? 3 </h3>
      <p> 2023 ? 6 ? </p>
      <p> ?? ???? ?? ?? ?? </p>
    </div>
  </div>
</div>

2. CSS? ?? ?? ???

?? ???? ???? ???? ??? ?? ???? ???? ??????. ?????? Flexbox? ???? ??????? @keyframes ???????.

 . ?? ?? {
  ?? : ??;
  ?? ?? : 800px;
  ?? : 40px ??;
  ?? : 20px 0;
}

/ * ?? ?? ?? */
.Timeline :: ?? {
  ???: '';
  ?? : ??;
  ?? : 0;
  ?? : 0;
  ?? : 4px;
  ?? : #007bff;
  ?? : 50%;
  ?? : translatex (-50%);
}

.TIMELINE-ITEM {
  ????? : Flex;
  ??? ??? : Flex-Start;
  ?? ?? : 50px;
  ???? : 0;
  ?? : Translatey (30px);
  ????? : FadeInup 0.8s Forwards;
}

/ * ? ??? ??? ????? ?? */
.Timeline-item : nth-Child (1) {?????-?? : 0.3s; }
.Timeline-item : nth-Child (2) {?????-?? : 0.6S; }
.Timeline-item : nth-Child (3) {?????-?? : 0.9s; }

/ * ?? ?? ?? */
.Timeline-dot {
  ?? : 20px;
  ?? : 20px;
  ?? : #007bff;
  ?? : 4px Solid #ffff;
  ??-???? : 50%;
  Box-Shadow : 0 0 3PX #007BFF40;
  ?? : 0 20px;
  ??-?? : ??;
}

/ * ??? ?? */
. ?? ?? ??? {
  ??? : 1;
  ?? : 20px;
  ?? : #f9f9f9;
  Border-Radius : 8px;
  Box-Shadow : 0 2PX 10PX RGBA (0,0,0,0.1);
  ?? width : 350px;
}

.TIMELINE-CONTENT H3 {
  ?? : 0 0 10px;
  ?? : #333;
}

.TIMELINE-CONTENT P {
  ?? : 5px 0;
  ?? : #666;
  ?? ?? : 0.9EM;
}

/ * ?? ?? (?? ??) */
.Timeline-item : nth-Child (??) .Timeline-fontent {
  ??-?? : ??? ??;
}

.Timeline-item : nth-Child (??) .Timeline-fontent {
  ??-?? : Flex-Start;
}

/ * ????? ? ??? */
@keyframes fadeinup {
  ?? {
    ???? : 1;
    ?? : Translatey (0);
  }
}

3. ??? ??

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

• ?? ???? ????? : height ?????? ?? ?? ??? ??????.
• ?? ?? ?? : ??? ??????? ??? ??? ?? ?????.
• ?? ? ???? : ?? ???? ?? ?? ???? ?????.

? : ??? ??? ?? ??? ?? ????????.

 . ?? ?? :: ? {
  ???: '';
  ?? : ??;
  ?? : 0;
  ?? : 50%;
  ?? : translatex (-50%);
  ?? : 4px;
  ?? : #007bff;
  ?? : 0;
  ????? : Drawline 1s Ease-Out Forwards;
}

@keyframes drawline {
  ?? {
    ?? : 100%;
  }
}

4. ???? ? ?? ??

• ???? ??? ?? ?????? ?? opacity ???? transform .
• ??? ??? ????? ? ?? animation-delay .
• ?? ??? <ol></ol> <ul></ul> ???? div
• ??? ??? : ??? ??? ???? ?? ? ?????? ???? ?? ??????.

????? CSS ?? ????? ?? ??? ???? ?? (Flexbox, Positioning), ??? ?? ?? ? ??? ?????? ???? ??? ?? ????. JavaScript? ???? ??? ??? ??? ? ? ??? ??? ???? ????.

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