我正在创建一个简单的css文本动画，并且在最后被延迟了，天知道为什么，我非常累，只需要使这个工作.
基本上，我有一个SVG，里面有一个<text>标签，里面有"Fussi's"，我只是想在加载页面上稍微动一下这个词.我玩了一些stroke-dashoffset和stroke-dasharray，动画本身工作正常，但当达到<text>%时，需要延迟才能回到0%
同样，问题本身是第一个循环何时结束(正向动画)，但开始向后动画需要一段时间.
下面是我的代码:
body {
box-sizing: border-box;
margin: 0;
background-color: white;
}
#loading {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
font-family: 'Leckerli One', cursive;
font-size: x-small;
}
svg text {
fill: rgb(188, 188, 188);
stroke: black;
stroke-width: 0.5;
stroke-dasharray: 125;
stroke-dashoffset: 0;
letter-spacing: 3px;
animation: 2s infinite alternate ease-in-out animate-name;
}
@keyframes animate-name {
100% {
stroke-dashoffset: 125;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Leckerli+One&display=swap" rel="stylesheet">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animated Background</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="loading">
<svg viewBox = "0 0 400 160">
<text x="50%" y="50%" dy=".32em" text-anchor="middle" class="text-body">
Fussi's
</text>
</svg>
</div>
</body>
</html>