svg文字 strokeアニメーション

svg {
  border: 1px solid gray;
}

.text-deco {
  font-size: 2em;
  fill: none;
  font-weight: bold;
  stroke: red;
  text-anchor: middle;
  animation: my-text 3s ease-in;
  stroke-dasharray: 500;
}

@keyframes my-text {
  0% {
    stroke-dashoffset: 500;
  }
  50% {
  }
  100% {
    stroke-dashoffset: 0;
  }
}