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

This question already has an answer here:

Solution of the problem

You're missing the starting keyframe of 0%. Add it and it works:

#path {
 animation-name: turn;
 transform-origin: 50px 50px;
 animation: turn 2s infinite;
}
@keyframes turn {
 0% {
 transform: rotate(0deg);
 }
 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>