CSS animation rotation over 360deg doesn't work in Chrome [duplicate] - css

Question

This question already has answers here:
Rotating animation doesn't work with chrome
(3 answers)
Closed 10 months ago.
It's been a few hours and I've been trying to make this animation work in Chrome. I've narrowed it down to this: transform: rotate(1080deg); works perfectly in Firefox but not in Chrome (it just doesn't rotate). I found out it rotates in Chrome only if I put less than 360 degrees. But the thing is, I do need to rotate it three times like it does in Firefox.
Here's my code
#path {
animation-name: turn;
transform-origin: 50px 50px;
animation: turn 2s infinite;
}
#keyframes turn {
100% {
transform: rotate(1080deg);
}
}
<svg viewbox="0 0 100 100" id="svg">
<defs>
<linearGradient id="gradient">
<stop offset="26%" stop-color="#632ef4"/>
<stop offset="100%" stop-color="#12ead5"/>
</linearGradient>
</defs>
<path id="path" stroke-linecap="round" stroke-width="15" stroke="url(#gradient)" fill="none" stroke-dasharray="200, 250.2" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80" transform="scale(1,1) translate(0,0)">
</path>
</svg>
Any ideas? :/

Answer 1

Are you trying to achieve this?
.logo{
animation: rotate 5s linear 0s infinite;
-webkit-animation: rotate 1s linear 0s infinite;
}
#keyframes rotate
{
0% {}
100% {transform: rotate(-360deg);}
}
#-webkit-keyframes rotate
{
0% {}
100% {-webkit-transform: rotate(-360deg);}
}
<svg viewbox="0 0 100 100" id="svg" class="logo">
<defs>
<linearGradient id="gradient">
<stop offset="26%" stop-color="#632ef4"/>
<stop offset="100%" stop-color="#12ead5"/>
</linearGradient>
</defs>
<path id="path" stroke-linecap="round" stroke-width="15" stroke="url(#gradient)" fill="none" stroke-dasharray="200, 250.2" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80" transform="scale(1,1) translate(0,0)">
</path>
</svg>