How to Animate a Moving SVG Polygon (Star) in <div>? Please Help!

Question

How to Animate an SVG <Polygon> to make an infinitely rotating and dashArray bordered Star ⭐️?
I’ve tried it in best of my knowledge and I’ve almost made all other parties of the code but my confusion or what’s not working for me is in the @keyframes rotate { } block. to best understand right below is my code link
https://code.sololearn.com/W3hnHyS4dIFw/?ref=app

Answer 1

html:
<svg height="150px" width="300px">
<polygon class="polygon" points="100, 10, 40, 198, 190, 78, 10, 70, 160, 198" stroke-dasharray="1000" stroke-dashoffset="1000" />

css:
.polygon
{
animation: 15s rotate 0s linear 1 forwards;
}

@keyframes rotate
{
to{
stroke-dashoffset: 0;
stroke-width: 5;
stroke: cyan;
}

}
https://code.sololearn.com/WH7eUdPHajA4/?ref=app

Answer 2

#Calvin Thank you so much. Your code helped me and after going through your code, It made me understand what’s wrong with the one I wanted. so I’m really very appriated for that, ThANK YOU SO MUCH AGAIN AND OVER AGAIN.
right below is the code I wanted

https://code.sololearn.com/WWYoQhN6hodB/?ref=app

Answer 3

#box:hover .polygon {
animation: 15s rotate forwards;
animation-iteration-count:infinite; /* infinite loop */
animation-direction:alternate; /* bounce animation */
}

@keyframes rotate {
from {
stroke-dasharray: 40, 20; /* dasharray requires at least two value to draw drashes (else continuous line) */
}
to {
stroke-dasharray: 10, 5;
stroke-width: 5;
stroke: cyan;
}
}

Answer 4

#visph Thank you so much I appriate for your trying to help me but this code doesn’t work for me as I wanted.