Animer un chemin Ellispe SVG avec CSS traduire

Question

Je suis un peu nouveau pour l'animation SVG et ont essayé d'animer un chemin d'ellipse dans un SVG I conçu en utilisant la fonction CSS traduire comme documenté Tricks CSS

Voici le code svg pour l'ellipse elle-même

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

ce que je suis en train de faire est d'obtenir à lever quelques pixels et descendre (en boucle), mais quand j'ajouté le CSS pour le @keyframe:

.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); 
    } 
} 

... ce qui se passe en ce que les œuvres d'animation, mais le chemin d'ellipse devient droite comme ceci:

J'apprécierais vraiment si je peux l'obtenir pour animer de haut en bas, mais à l'angle d'origine que je conçu le ellipse pour ressembler à ce qui était comme ça:

PS-je recherche pour y parvenir sans JS ou jQuery.

Answer 1

Déplacez l'animation vers un élément parent afin qu'elle ne remplace pas la transformation de l'ellipse.

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>