テキストをアウトライン表示してから塗りつぶす CSS

body {
  background: #f8f8f8;
  display:flex;
  align-items: center;
  height: 90vh;
}

.text-line {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: dash 5s linear forwards, filling 5s ease-in forwards;
  font-size: 80px;
}

.text-line text {
  font-family: Helvetica,Arial,sans-serif;
  font-weight: normal;
  font-style: normal;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes filling {
  0%, 90% { fill: #bac736; fill-opacity: 0; }
  100% { fill: #bac736; fill-opacity: 1; }
}

<svg height="100" stroke="#bac736" stroke-width="2" class="text-line" width="100%"><text x="50%" dominant-baseline="middle" text-anchor="middle" y="50%">#ディーコム</text></svg>