当为两个SVG属性设置动画时，Css动画具有奇怪的延迟

Question

正如标题所说，当我尝试同时设置笔划dashoffset和填充的动画时。它有一个奇怪的不想要的3秒延迟，但我有两个动画属性都在一个关键帧中，如下所示

svg {
background-color: black;
stroke-dasharray: 1800;
fill: #fff;
stroke: #fff;
opacity: 10;
animation: reveal 10s cubic-bezier(0, 0.23, 1, 0.1);
animation-delay: 0;
max-width: min(calc(100vw - 10rem), 40rem);
}
@keyframes reveal {
0% {
fill: none;
stroke-dashoffset: 1800;
}
80% {
fill: rgba(255, 255, 255, 0);
}
100% {
fill: rgba(255, 255, 255, 1);
stroke-dashoffset: 0;
}
}

<svg
id="Layer_1"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 314.41 79.8"
>
<defs>
<style>
.cls-1 {
font-size: 76px;
font-family: BebasNeue-Regular, Bebas Neue;
}
.cls-2 {
letter-spacing: 0em;
}
.cls-3 {
letter-spacing: 0em;
}
</style>
</defs>
<text class="cls-1" transform="translate(0 64.6)">
Hel
<tspan class="cls-2" x="85.65" y="0">l</tspan>
<tspan class="cls-3" x="111.49" y="0">o World</tspan>
</text>
</svg>

我尝试通过访问以下URL进行研究：

1. 同时播放多个CSS动画

2. CSS 3怪异动画延迟

但是，我仍然没有任何想法来解决我的问题，右边是我在jsfiddle上的代码https://jsfiddle.net/ju781mb9/

PS。视频只是占位符，所以你对网站有了一个想法，我也放慢了的动画速度

Answer 1

在编写@keyframes规则的方式中，似乎希望笔划dashoffset从动画持续时间的开始开始，到结束。但事实上，您完全无法控制代码的结构方式。您编写stroke-dasharray: 1800，并假设1800px是总笔划长度。

• 文本中字形的笔划长度是每个单独字形的轮廓长度。每个字形都有不同的笔划长度
• 如果字形由多个子路径组成，如字母"strong"；o"由一条外侧线和一条内侧线组成，笔划dasharray分别为它们定义。然后在一个组合笔划中有多个动画长度
• 您提供了一个非标准的font-family，但不包括web字体源。这意味着，每个碰巧没有安装你假设的确切字体的人，都会看到一个不同替换字体的文本，其笔划长度不同
• 您定义了备用字体。两种字体的笔划长度不同

只有一种方法可以摆脱这种困境并控制笔划长度和随后的动画计时：使用矢量绘制编辑器将文本转换为路径。(你似乎使用的Adobe Illustrator可以做到这一点。(记得设置一个aria-label属性，用它最初表示的文本来声明封闭的<g>元素。

SVG<path>元素有一个pathLength属性，在该属性中，您可以简单地用虚构的属性覆盖测量的笔划长度。如果随后将该值用于stroke-dasharray特性，则动画将如同使用了正确的笔划长度一样运行。以下代码将显示正好沿着路径长度的一半的笔划：

<path style="stroke-dasharray:100;stroke-dashoffset:-50" 
pathLength="100" 
d="M 125.2,25.3 H 131.7 V 80 H 125.2 Z" />

注意stroke-dashoffset的负数。(我将在这里描述复杂的原因，它们可以填满整个教程。(

svg {
background-color:black;
}
.label path {
fill: white;
stroke: white;
stroke-dasharray: 100;
stroke-dashoffset: 0;
animation: reveal 10s cubic-bezier(0, 0.23, 1, 0.1);
}
@keyframes reveal {
0% {
fill: none;
stroke-dashoffset: -100;
}
80% {
fill: rgba(255, 255, 255, 0);
}
100% {
fill: rgba(255, 255, 255, 1);
stroke-dashoffset: 0;
}
}

<svg viewBox="0 0 450 100">
<g class="label" aria-label="Hello World" style="fill:none;stroke:#ffffff">
<path pathLength="100" d="M 27.07,27.51 H 34.17 V 49.03 H 59.97 V 27.51 H 67.07 V 80 H 59.97 V 55 H 34.17 V 80 H 27.07 Z" />
<path pathLength="100" d="M 114.6,58.7 V 61.86 H 84.86 Q 85.29,68.54 88.87,72.05 92.49,75.54 98.93,75.54 102.7,75.54 106.1,74.62 109.6,73.71 113.1,71.88 V 78 Q 109.6,79.47 106,80.25 102.3,81.02 98.54,81.02 89.12,81.02 83.6,75.54 78.11,70.05 78.11,60.7 78.11,51.03 83.32,45.37 88.55,39.68 97.41,39.68 105.4,39.68 110,44.81 114.6,49.91 114.6,58.7 Z M 108.1,56.8 Q 108.1,51.49 105.1,48.32 102.3,45.16 97.48,45.16 92.07,45.16 88.8,48.22 85.57,51.28 85.07,56.83 Z" />
<path pathLength="100" d="M 125.2,25.3 H 131.7 V 80 H 125.2 Z" />
<path pathLength="100" d="M 145.2,25.3 H 151.7 V 80 H 145.2 Z" />
<path pathLength="100" d="M 180.4,45.16 Q 175.2,45.16 172.2,49.24 169.2,53.28 169.2,60.35 169.2,67.41 172.2,71.49 175.2,75.54 180.4,75.54 185.6,75.54 188.6,71.46 191.6,67.38 191.6,60.35 191.6,53.35 188.6,49.27 185.6,45.16 180.4,45.16 Z M 180.4,39.68 Q 188.9,39.68 193.7,45.16 198.5,50.64 198.5,60.35 198.5,70.02 193.7,75.54 188.9,81.02 180.4,81.02 171.9,81.02 167.1,75.54 162.3,70.02 162.3,60.35 162.3,50.64 167.1,45.16 171.9,39.68 180.4,39.68 Z" />
<path pathLength="100" d="M 227.7,27.51 H 234.9 L 245.9,71.88 256.9,27.51 H 264.9 L 275.9,71.88 286.9,27.51 H 294.1 L 281,80 H 272 L 261,34.44 249.8,80 H 240.9 Z" />
<path pathLength="100" d="M 314.3,45.16 Q 309.1,45.16 306.1,49.24 303,53.28 303,60.35 303,67.41 306,71.49 309.1,75.54 314.3,75.54 319.5,75.54 322.5,71.46 325.5,67.38 325.5,60.35 325.5,53.35 322.5,49.27 319.5,45.16 314.3,45.16 Z M 314.3,39.68 Q 322.7,39.68 327.5,45.16 332.4,50.64 332.4,60.35 332.4,70.02 327.5,75.54 322.7,81.02 314.3,81.02 305.8,81.02 301,75.54 296.2,70.02 296.2,60.35 296.2,50.64 301,45.16 305.8,39.68 314.3,39.68 Z" />
<path pathLength="100" d="M 365.9,46.67 Q 364.8,46.04 363.5,45.76 362.2,45.44 360.7,45.44 355.2,45.44 352.2,49.03 349.3,52.58 349.3,59.26 V 80 H 342.8 V 40.63 H 349.3 V 46.74 Q 351.3,43.16 354.6,41.43 357.9,39.68 362.6,39.68 363.2,39.68 364,39.78 364.8,39.85 365.8,40.03 Z" />
<path pathLength="100" d="M 372.7,25.3 H 379.2 V 80 H 372.7 Z" />
<path pathLength="100" d="M 418.6,46.6 V 25.3 H 425.1 V 80 H 418.6 V 74.09 Q 416.6,77.61 413.4,79.33 410.3,81.02 406,81.02 398.8,81.02 394.3,75.32 389.9,69.63 389.9,60.35 389.9,51.07 394.3,45.37 398.8,39.68 406,39.68 410.3,39.68 413.4,41.4 416.6,43.09 418.6,46.6 Z M 396.6,60.35 Q 396.6,67.48 399.5,71.56 402.4,75.61 407.6,75.61 412.7,75.61 415.6,71.56 418.6,67.48 418.6,60.35 418.6,53.21 415.6,49.17 412.7,45.09 407.6,45.09 402.4,45.09 399.5,49.17 396.6,53.21 396.6,60.35 Z" />
</g>
</svg>