main.css

*,
*::before,
*::after {
  box-sizing: border-box;
}
:root {
  --background-color: #fff;
  --chart--background-color: #fec84b;
}

body {
  background-color: var(--background-color);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

.animation-container {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.animation-item {
  display: flex;
}

.animation-item .title {
  flex: 2;
}

.animation-item .details {
  flex: 9;
  position: relative;
}

.animation-item .details .chart {
  display: inline-block;
  height: 100%;
  background-color: var(--chart--background-color);
}
.animation-item .details .time {
  transform: translateX(10%);
}

.animation-item.lesan .details .chart {
  width: 0.12%;
  animation: lesan 130ms linear forwards;
}

.animation-item.prisma-postgres .details .chart {
  width: 1.64%;
  animation: prisma-postgres 1649ms linear forwards;
}

.animation-item.prisma-postgres-graphql .details .chart {
  width: 2%;
  animation: prisma-postgres-graphql 1973ms linear forwards;
}
.animation-item.prisma-postgres-graphql .details .time {
  flex-shrink: 0;
}

.animation-item.mongoose-no-sort .details .chart {
  width: 6%;
  animation: mongoose-no-sort 5896ms linear forwards;
}

.animation-item.mongoose-sort .details {
  position: relative;
  display: flex;
}

.animation-item.mongoose-sort .details .chart {
  width: calc(100% - 4rem);
  animation: mongoose-sort 94106ms linear forwards;
}

.animation-item.mongoose-sort .details .line {
  position: absolute;
  transform: translateX(-100%);
  bottom: 0;
  width: 1px;
  height: 8rem;
  background-color: var(--chart--background-color);
  animation: line-bar 94106ms linear forwards;
}

.animation-item.mongoose-sort .details .line::after {
  position: absolute;
  top: 0;
  transform: translateY(-100%);
  left: -0.4rem;
  content: counter(count) "s";
  animation: line-bar 94106ms linear forwards;
  animation: counter 94106ms linear forwards;
}

/* the counter animation */
@keyframes counter {
  0% {
    content: "0s";
  }

  1.06% {
    content: "1s";
  }

  2.13% {
    content: "2s";
  }

  3.19% {
    content: "3s";
  }

  4.25% {
    content: "4s";
  }

  5.31% {
    content: "5s";
  }

  6.38% {
    content: "6s";
  }

  7.44% {
    content: "7s";
  }

  8.5% {
    content: "8s";
  }

  9.56% {
    content: "9s";
  }

  10.63% {
    content: "10s";
  }

  11.69% {
    content: "11s";
  }

  12.75% {
    content: "12s";
  }

  13.81% {
    content: "13s";
  }

  14.88% {
    content: "14s";
  }

  15.94% {
    content: "15s";
  }

  17% {
    content: "16s";
  }

  18.06% {
    content: "17s";
  }

  19.13% {
    content: "18s";
  }

  20.19% {
    content: "19s";
  }

  21.25% {
    content: "20s";
  }

  22.32% {
    content: "21s";
  }

  23.38% {
    content: "22s";
  }

  24.44% {
    content: "23s";
  }

  25.5% {
    content: "24s";
  }

  26.57% {
    content: "25s";
  }

  27.63% {
    content: "26s";
  }

  28.69% {
    content: "27s";
  }

  29.75% {
    content: "28s";
  }

  30.82% {
    content: "29s";
  }

  31.88% {
    content: "30s";
  }

  32.94% {
    content: "31s";
  }

  34% {
    content: "32s";
  }

  35.07% {
    content: "33s";
  }

  36.13% {
    content: "34s";
  }

  37.19% {
    content: "35s";
  }

  38.25% {
    content: "36s";
  }

  39.32% {
    content: "37s";
  }

  40.38% {
    content: "38s";
  }

  41.44% {
    content: "39s";
  }

  42.51% {
    content: "40s";
  }

  43.57% {
    content: "41s";
  }

  44.63% {
    content: "42s";
  }

  45.69% {
    content: "43s";
  }

  46.76% {
    content: "44s";
  }

  47.82% {
    content: "45s";
  }

  48.88% {
    content: "46s";
  }

  49.94% {
    content: "47s";
  }

  51.01% {
    content: "48s";
  }

  52.07% {
    content: "49s";
  }

  53.13% {
    content: "50s";
  }

  54.19% {
    content: "51s";
  }

  55.26% {
    content: "52s";
  }

  56.32% {
    content: "53s";
  }

  57.38% {
    content: "54s";
  }

  58.44% {
    content: "55s";
  }

  59.51% {
    content: "56s";
  }

  60.57% {
    content: "57s";
  }

  61.63% {
    content: "58s";
  }

  62.7% {
    content: "59s";
  }

  63.76% {
    content: "60s";
  }

  64.82% {
    content: "61s";
  }

  65.88% {
    content: "62s";
  }

  66.95% {
    content: "63s";
  }

  68.01% {
    content: "64s";
  }

  69.07% {
    content: "65s";
  }

  70.13% {
    content: "66s";
  }

  71.2% {
    content: "67s";
  }

  72.26% {
    content: "68s";
  }

  73.32% {
    content: "69s";
  }

  74.38% {
    content: "70s";
  }

  75.45% {
    content: "71s";
  }

  76.51% {
    content: "72s";
  }

  77.57% {
    content: "73s";
  }

  78.63% {
    content: "74s";
  }

  79.7% {
    content: "75s";
  }

  80.76% {
    content: "76s";
  }

  81.82% {
    content: "77s";
  }

  82.89% {
    content: "78s";
  }

  83.95% {
    content: "79s";
  }

  85.01% {
    content: "80s";
  }

  86.07% {
    content: "81s";
  }

  87.14% {
    content: "82s";
  }

  88.2% {
    content: "83s";
  }

  89.26% {
    content: "84s";
  }

  90.32% {
    content: "85s";
  }

  91.39% {
    content: "86s";
  }

  92.45% {
    content: "87s";
  }

  93.51% {
    content: "88s";
  }

  94.57% {
    content: "89s";
  }

  95.64% {
    content: "90s";
  }

  96.7% {
    content: "91s";
  }

  97.76% {
    content: "92s";
  }

  98.82% {
    content: "93s";
  }

  100% {
    content: "94.106s";
  }
}

/* the line-bar animation */
@keyframes line-bar {
  from {
    left: 0;
  }

  to {
    left: calc(100% - 4rem);
  }
}

/* chart animations */
@keyframes lesan {
  from {
    width: 0;
  }

  to {
    width: 0.12%;
  }
}

@keyframes prisma-postgres {
  from {
    width: 0;
  }

  to {
    width: 1.64%;
  }
}

@keyframes prisma-postgres-graphql {
  from {
    width: 0;
  }

  to {
    width: 2%;
  }
}

@keyframes mongoose-no-sort {
  from {
    width: 0;
  }

  to {
    width: 6%;
  }
}

@keyframes mongoose-sort {
  from {
    width: 0;
  }

  to {
    width: calc(100% - 4rem);
  }
}