は、中に描く回転、で描くよりも速い速度で

Question

https://jsfiddle.net/u1sqa210/

私は時計回りに描画されますスピナーを作りたいが、2つのフルサイクルを回しSVGアニメーションを引き出し、その後、反時計回りに引き出すコンバイン。私はかなり近いですが、私はどのように描画アニメーションと回転を調整するか分からない。私は通常、十分ではない回転、または私がしたいものではない描画アニメーションの間に終わる。

$spinnerSize: 100; 

svg.spinner { 
    width: $spinnerSize + px; 
    height: $spinnerSize + px; 
    x: 100px; 
    y: 100px; 
    viewBox: 0 0 $spinnerSize $spinnerSize; 

    circle { 
     fill: transparent; 
     stroke-width: 12; 
     stroke-dasharray: (3.14 * $spinnerSize); 
     transform-origin: (0.5px * $spinnerSize) (0.5px * $spinnerSize) 0; 
     animation: 
      spinner 3s linear infinite, 
      rotation 3s linear infinite; 
     transform: ScaleX(-1) rotate(270deg); 
    } 
} 

@keyframes spinner { 
    0% { stroke-dashoffset: 350; } 
    10% { stroke-dashoffset: 630; } 
    30% { stroke-dashoffset: 630; } 
100% { stroke-dashoffset: 1000; } 
} 


@keyframes rotation 
{ 
    0% {transform: rotate(270deg)} 
    10% {transform: rotate(270deg)} 
    15% {transform: rotate(300deg)} 
    30% {transform: rotate(270deg)} 
    100% {transform: rotate(360deg);} 
} 

<svg class="spinner" stroke="url(#linear)"> 
    <circle cx="50" cy="50" r="40"></circle> 
    <defs> 
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"> 
     <stop offset="0%" stop-color="rgba(231,60,99,1)"/> 
     <stop offset="100%" stop-color="rgba(150,77,135,1)"/> 
    </linearGradient> 
    </defs> 
</svg> 

Answer 1

これはあなたが技術的に求めているものだと思います。

@keyframes spinner { 
    0% { stroke-dashoffset: 350; transform: rotate(270deg) } 
    25% { stroke-dashoffset: 630; transform: rotate(270deg)} 
    50% { stroke-dashoffset: 630; transform: rotate(990deg)} 
    75% { stroke-dashoffset: 630; transform: rotate(990deg)} 
100% { stroke-dashoffset: 1000; transform: rotate(990deg)} 
} 

https://jsfiddle.net/ocs3dkrm/

：私は1つに2つのアニメーションを組み合わせました