same code , working Chrome on firefox , but not working Chrome - html

Question

this code isn't working on chrome, it doesn't show anything
if I change the animation-duration from 5s to 2s, it will show it the wrong way.
here is CSS:
div{
--m0-: polygon(0 0,0 0,0 0,0 0);
--m1-: polygon(0 0,100% 0,100% 15%,0 0);
--m2-: polygon(0 0,3% 0,100% 15%,100% 16%);
--m3-: polygon(0 0,0 0,100% 15%,100% 36%);
--m4-: polygon(0 0,0 0,100% 36%,0 28%);
--m5-: polygon(0 28%,100% 36%,100% 37%,0 29%);
--m6-: polygon(0 29%,95% 37%,100% 55%,100% 55%);
--m7-: polygon(0 29%,20% 50%,100% 65%,0 50%);
--m8-: polygon(0 50%,100% 66%,100% 88%,66% 70%);
--m9-: polygon(0 50%,8% 70%,100% 95%,0 70%);
--m10-: polygon(0 70%,100% 100%,38% 100%,0 75%);
--m11-: polygon(0 100%,0 100%,0 100%,0 100%);
width: 100%;
height: 100%;
background-color: rgb(237,0,0);
position: absolute;
-webkit-clip-path:var(--m0-);
clip-path:var(--m0-);
-webkit-animation: show;
animation: show;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
#-webkit-keyframes show{
0%{
clip-path: var(--m1-);
}
10%{
clip-path: var(--m2-);
}
20%{
clip-path: var(--m3-);
}
30%{
clip-path: var(--m4-);
}
40%{
clip-path: var(--m5-);
}
50%{
clip-path: var(--m6-);
}
60%{
clip-path: var(--m7-);
}
70%{
clip-path: var(--m8-);
}
80%{
clip-path: var(--m9-);
}
90%{
clip-path: var(--m10-);
}
100%{
clip-path: var(--m11-);
}
}
body only has a div
I added -webkit to the CSS provided but still nothing.
I tried to add -webkit- in my code but it didn't work;
but when i change animation-iteration-count: 1; to animation-iteration-count: infinite; it works!