After researching for hours, I've encountered an issue with my animation in Chrome. It seems that while transform: rotate(1080deg); works flawlessly in Firefox, it fails to rotate in Chrome. Surprisingly, I discovered that it only rotates in Chrome when the degree is less than 360. However, I need it to rotate three times, just like it does in Firefox.
Here's the code snippet causing the problem:
#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 suggestions on how to solve this? :/