CSS Animation webkit transform rotate: why start from 0 all the time

Question

I hope someone can help me with this issue, I create a jsfiddle with my example.

Brief: I would like to rotate an "orange dart" in a circle every time the user click on a link. As you can see it's working well, the only boring issue is that the "orange dart" start his rotation from 0deg instead to start from the last degree.

PS: In Firefox is not giving this trouble. Part of the code:

HTML

<div id="dart"></div>

<span class="btn js_update1">1</span>
<span class="btn js_update2">2</span>
<span class="btn js_update3">3</span>
<span class="btn js_update4">4</span>
<span class="btn js_update5">5</span>
<span class="btn js_update6">6</span>

JS

to_degree = 0;
var arc_params = {
 center: [218,218],  
 radius: 177,    
 start: 360,
 end: 0,
 dir: -1
}

$('.js_update1').on('click', function() {

from_degree = to_degree;
to_degree = 0;
startChange('freccia_orange',from_degree,to_degree);
arc_params.end = 360;
    if (arc_params.start > 360  )
    {
        arc_params.dir = -1;
    }
    else {
        arc_params.dir = 1;
    }
$("#dart").animate({path : new $.path.arc(arc_params)},980);//end: 0

 arc_params.start = 360;

});
$('.js_update2').on('click', function() {
from_degree = to_degree;
to_degree = 60;
startChange('freccia_orange',from_degree,to_degree);
arc_params.end = 300;
    if (arc_params.start > 300  )
    {
        arc_params.dir = -1;
    }
    else {
        arc_params.dir = 1;
    }
$("#dart").animate({path : new $.path.arc(arc_params)},980);//end: 0

 arc_params.start = 300;
});
$('.js_update3').on('click', function() {
from_degree = to_degree;
to_degree = 120;
startChange('freccia_orange',from_degree,to_degree);
arc_params.end = 240;
    if (arc_params.start > 240  )
    {
        arc_params.dir = -1;
    }
    else {
        arc_params.dir = 1;
    }
$("#dart").animate({path : new $.path.arc(arc_params)},980);//end: 0

 arc_params.start = 240;

});
$('.js_update4').on('click', function() {
from_degree = to_degree;
to_degree = 180;
startChange('freccia_orange',from_degree,to_degree);
arc_params.end = 180;
    if (arc_params.start > 180  )
    {
        arc_params.dir = -1;
    }
    else {
        arc_params.dir = 1;
    }
$("#dart").animate({path : new $.path.arc(arc_params)},980);//end: 0

 arc_params.start = 180;

});
$('.js_update5').on('click', function() {
from_degree = to_degree;
to_degree = 240;
startChange('freccia_orange',from_degree,to_degree);
arc_params.end = 120;
    if (arc_params.start > 120  )
    {
        arc_params.dir = -1;
    }
    else {
        arc_params.dir = 1;
    }
$("#dart").animate({path : new $.path.arc(arc_params)},980);//end: 0

 arc_params.start = 120;

});
$('.js_update6').on('click', function() {
from_degree = to_degree;
to_degree = 300;
startChange('freccia_orange',from_degree,to_degree);
arc_params.end = 60;
    if (arc_params.start > 60 )
    {
        arc_params.dir = -1;
    }
    else {
        arc_params.dir = 1;
    }
$("#dart").animate({path : new $.path.arc(arc_params)},980);//end: 0

 arc_params.start = 60;

});

http://jsfiddle.net/kibray/z02jtcf0/5/

Answer 1

360deg等于0deg，所以如果您说要从360开始，它将以0开始并且是正确的，最后一个度是359