CSSとSVG Ellispeパスをアニメーション

Question

は、私はSVGアニメーションに新しいの一種だとCSSを使用して、私が設計されたSVGに楕円パスをアニメーション化しようとしている翻訳ここでCSSのトリックに

を文書としての機能を翻訳しています楕円自分自身のためのSVGコード

<ellipse id="halo" class="halo_path" transform="rotate(-71.04 448.99 166.502)" cx="449" cy="166.5" rx="63" ry="234.3" /> 

私はそれがピクセルのカップルを上昇し（ループのように）降りてくるために取得されてやろうとしているが、私は@keyframeのためのCSSを追加したとき：

.halo_path { 
    transform: rotate(109deg); 
    fill: none; 
    stroke: #D9CC29; 
    stroke-width: 25.0519; 
    stroke-miterlimit: 10; 
    transform-origin: center; 
    animation: move_halo 2s infinite; 
    animation-direction: alternate-reverse; 
} 

@keyframes move_halo { 
    0% { 
     transform: translate(0, 5px); 
    } 
    100% { 
     transform: translate(0, -10px); 
    } 
} 

...アニメーション作品ということで起こりますが、楕円のパスがまっすぐにこのようになると何：私はそれがアップアニメーションやダウンしてもらうが、私は設計された、元の角度にできるかどう

私は本当に感謝しますこのようにあったように見えるように楕円：

PS - 私はJSやjQueryのせずにこれを達成するために探して。

Answer 1

楕円の変換を上書きしないように、アニメーションを親要素に移動します。

html, body, svg { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
ellipse { 
 
    transform: rotate(109deg); 
 
    fill: none; 
 
    stroke: #D9CC29; 
 
    stroke-width: 25.0519; 
 
    stroke-miterlimit: 10; 
 
    transform-origin: center; 
 
} 
 

 
.halo_path { 
 
    animation: move_halo 2s infinite; 
 
    animation-direction: alternate-reverse; 
 
} 
 

 
@keyframes move_halo { 
 
    0% { 
 
     transform: translate(0, 5px); 
 
    } 
 
    100% { 
 
     transform: translate(0, -10px); 
 
    } 
 
}

<svg viewBox="0 0 1000 400"> 
 
    <g class="halo_path" > 
 
    <ellipse cx="449" cy="166.5" rx="63" ry="234.3" /> 
 
    </g> 
 
</svg>