求助css动画使用变量问题

[learning-diary]

<svg width="800" height="600" style="background:#FFFFF0;border:solid 2px #FF7F50" opacity="1">
<path class="path1" d="M 23.17,45.038 200.916,104.7447 0.77796,200.48 144.93,6.9496 154.73,201.51 Z" fill="none" stroke="black" stroke-width="0.7" opacity="1"/>
</svg>
<style>
:root {
--animationtime1: 100;
--test:3%;
}

.path1 {
animation:anmpath1 calc(var(--animationtime1)*1s) ease-out 0s forwards;
}

@keyframes anmpath1 {
0% {stroke-dasharray:0,1100;}
var(--test) {stroke-dasharray:1100,1100;}
100% {stroke-dasharray:1100,1100;}
}
</style>
兰色部分能正常工作，但红色部分不工作，请各位老师帮忙

[天际的海浪]

css变量值只能用作属性值，不能用作属性名，更不能用作选择符