使用Snap.svg的SVG线动画

Question

I am literally a crawling baby in snap SVG and given that the amount of resources available online is not sufficient for a Rookie like me, I thought I would ask here. I want to learn how to do this animation that I have generated in SVG using CSS3 animations however I recently found out that, FF, IE have some issues with CSS3 animations and CSS3 transforms in SVG, so I worked only with webkit and i decided to use Snap SVG for the others, I think you know what I mean. Any how, this is a glimpse of the animation:

<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"
 width="711.1px" height="717.1px" viewBox="0 0 711.1 717.1" enable-background="new 0 0 711.1 717.1" xml:space="preserve">


<circle class="circle" fill="none" stroke="#FD4F00" stroke-width="66" stroke-miterlimit="10" cx="355.55" cy="358.55" r="285.956"/>

</svg>

This is the CSS3 animation:

.circle {
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
-webkit-animation: dash 5s linear alternate infinite;
-webkit-transform-origin: 50% 50% ;
-webkit-transform: rotate(-90deg) ;
}
@-webkit-keyframes dash {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Here is the Fiddle, to see the Full animation in action so you can see what I am talking about here.

Thanks for your help, I apologize as I am really new in Snap SVG and I really dont know how to achieve that animation so I am hoping to learn from this mini project.

EDIT: Alright so I have completed the animation Here is a Fiddle . Now the only problem is this,that how to adjust the repeatCount using snap.svg ? Could you please tell me how to adjust the repeatCount in Snap.svg ? Thanks for your help !

Answer 1

DEMO

Update

I really like your improvements, pure css.
Now since I'm not sure what you need help with I remade my answer but with your new fiddle.

so the animation run a set amount of times:

  -webkit-animation: dash 5s linear alternate 3 forwards;

Note
Consider adding all the prefixes so you have both -wekkit-animation and animation and so you have support for none webkit browsers.

Cross Browser
Animation:

-webkit-animation: 
-moz-animation:  
-o-animation:

Keyframe:

@-webkit-keyframes NAME {
    //code
}
@-moz-keyframes NAME {
    //code
}
@-o-keyframes NAME {
    //code
}
@keyframes NAME-YOUR-ANIMATION {
    //code
}

 .circle { stroke-dasharray: 2000; stroke-dashoffset: 2000; -webkit-animation: dash 5s linear alternate 3 forwards; -webkit-transform-origin: 50% 50% ; -webkit-transform: rotate(-90deg) ; } .circle1 { stroke-dasharray: 2000; stroke-dashoffset: 2000; -webkit-animation: dash 5s linear alternate 3 forwards; -webkit-transform-origin: 50% 50% ; -webkit-transform: rotate(-90deg) ; } .circle2 { stroke-dasharray: 2000; stroke-dashoffset: 2000; -webkit-animation: dash 5s linear alternate 3 forwards; -webkit-transform-origin: 50% 50% ; -webkit-transform: rotate(-90deg) ; } .circle3 { stroke-dasharray: 2000; stroke-dashoffset: 2000; -webkit-animation: dash 5s linear alternate 3 forwards; -webkit-transform-origin: 50% 50% ; -webkit-transform: rotate(-90deg) ; } @-webkit-keyframes dash { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } } 

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 711.1 717.1" enable-background="new 0 0 711.1 717.1" xml:space="preserve"> <circle class="circle" fill="none" stroke="#FD4F00" stroke-width="66" stroke-miterlimit="10" cx="355.55" cy="358.55" r="285.956"/> <circle class="circle1" fill="none" stroke="#FD4F00" stroke-width="3.0819" stroke-miterlimit="10" cx="355.55" cy="358.55" r="233.497"/> <circle class="circle2" fill="none" stroke="#FD4F00" stroke-width="2.8006" stroke-miterlimit="10" cx="355.55" cy="358.55" r="212.186"/> <circle class="circle3" fill="none" stroke="#FD4F00" stroke-width="2.5572" stroke-miterlimit="10" cx="355.55" cy="358.55" r="193.744"/> </svg> 

Answer 2

I know I'm pretty late here, but I Wanted to answer the last question in your edit.

http://jsfiddle.net/oc2aus6w/9/

The general idea is to call the original function as the callback for the end of the animation.

code below for those who cannot see the fiddle:

var s = Snap.select('#circle')
s1 = s.select('circle:nth-child(1)');
s2 = s.select('circle:nth-child(2)');
s3 = s.select('circle:nth-child(3)');
s4 = s.select('circle:nth-child(4)');

s1.attr({
      transform: 'r-90'
    });
s2.attr({
  transform: 'r-90'
});
s3.attr({
  transform: 'r-90'
});
s4.attr({
  transform: 'r-90'
});
function circleAnim() {  
    Snap.animate(2000,4000,function(value){
        s1.attr({
            'stroke-dasharray':value
        });
                s2.attr({
            'stroke-dasharray':value
        });
        s3.attr({
            'stroke-dasharray':value
        });
        s4.attr({
            'stroke-dasharray':value
        });
    },3000, null, function(){
        Snap.animate(4000,2000,function(value){
            s1.attr({
                'stroke-dasharray':value
            });
            s2.attr({
                'stroke-dasharray':value
            });
            s3.attr({
                'stroke-dasharray':value
            });
            s4.attr({
                'stroke-dasharray':value
            });
        }, 3000, null, circleAnim);    
    });
}

circleAnim();