SVG-Animationsproblem. Nicht immer wie gewünscht

Question

Ich brauche eine kleine Hilfe, um diese Animation zu passen: http://codepen.io/tutsplus/pen/ByRzOV

dazu zwischen M und T:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 376 56.6" enable-background="new 0 0 376 56.6" xml:space="preserve"> 
 
<path fill="#232527" d="M345.8,53.3C345.8,53.3,345.8,53.3,345.8,53.3c-1.1,0-2.2-0.7-2.7-1.7l-21.7-44c-0.7-1.5-0.1-3.3,1.4-4 
 
\t c1.5-0.7,3.3-0.1,4,1.4l19,38.6l19.2-38.6c0.7-1.5,2.5-2.1,4-1.3c1.5,0.7,2.1,2.5,1.3,4l-21.9,44C348,52.6,347,53.3,345.8,53.3z 
 
\t M274.5,53.3c-1.7,0-3-1.3-3-3v-44c0-1.7,1.3-3,3-3s3,1.3,3,3v44C277.5,51.9,276.1,53.3,274.5,53.3z M205,53.3c-1.7,0-3-1.3-3-3v-41 
 
\t h-19c-1.7,0-3-1.3-3-3s1.3-3,3-3h44c1.7,0,3,1.3,3,3s-1.3,3-3,3h-19v41C208,51.9,206.7,53.3,205,53.3z M30.5,53.2 
 
\t C30.5,53.2,30.5,53.2,30.5,53.2c-1.1,0-2.2-0.7-2.7-1.7l-16-32.5v31.1c0,1.7-1.3,3-3,3s-3-1.3-3-3v-44c0-1.4,1-2.6,2.3-2.9 
 
\t C9.6,3,11,3.6,11.6,4.9l19,38.6L49.8,4.9c0.6-1.2,2-1.9,3.4-1.6c1.4,0.3,2.3,1.5,2.3,2.9v44c0,1.7-1.3,3-3,3s-3-1.3-3-3V18.9 
 
\t L33.2,51.6C32.7,52.6,31.7,53.2,30.5,53.2z"/> 
 
</svg>

Ich habe versucht, eine Menge und rumgespielt aber tat nicht Erfolg bekommen. Bitte helfen Sie. Oder gibt es eine andere Möglichkeit, diese Art von Kreis-Animation in SVG zu haben. Ich habe versucht, auch zu schaffen, aber hat nicht gearbeitet. Ist es auch ohne css und js möglich?

Vielen Dank im Voraus. Sehr geschätzt.

Mit freundlichen Grüßen

Answer 1

Hier ist eine Möglichkeit, mit CSS-Animationen: https://jsfiddle.net/3o9msftL/1/, obwohl es nicht ganz die gleiche Lockerung hat, und scheint mehr CPU-intensive als die GreenSock JS-Animationen zu sein (was ich nicht noch vertieft).

Im Grunde habe ich einen Kreis, der wie folgt aussieht:

<circle cx="120" cy="29" r="23" 
     stroke-width="6" stroke="#000" fill="none" 
     style="animation: dash 5s infinite; 
       animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955); 
       transform: rotate(-90deg) /* else it starts on the right side */; 
       transform-origin: 120px 29px" 
     stroke-dasharray="150, 150" stroke-linecap="round"/> 

Diese Dimensionen, weil sie schien mit dem Rest Ihres SVG zu passen, und ich glaube, die 150.150-Werte, weil es etwa 2nr ist (dh der Umfang) . Dann in der CSS, habe ich die folgende CSS:

@keyframes dash { 
    to { 
    stroke-dashoffset: -300; 
    } 
} 

300 die Summe der Strich-Arrays ist (oder ist es das Doppelte des Schlaganfalls?) Und negativ für den Uhrzeigersinn.