SVG动画走错了路

Question

目前，我有这个：http://jsfiddle.net/3qzt3hz6/4/

.circle{ 
stroke:green; 
stroke-width:10; 
    fill:none; 
    stroke-dasharray:220 360; 

    stroke-dashoffset:0; 

    animation:mymove 2s infinite; 
} 

@keyframes mymove { 
    0%{ 
     fill:tomato; 
    } 
    100%{ 
     fill:tomato; 
    stroke-dasharray:0 360; 
     stroke-dashoffset:10; 
    } 
} 

我想知道我怎么能“反向”的动画，
现在它消除了绿色的部分，但我想它来创建绿色部分。
所以..它应该开始没有边框，并创建绿色边框，而不是以边框开始并删除边框。

Answer 1

使用此，

.circle{ 
     stroke:green; 
     stroke-width:10; 
     fill:none; 
     stroke-dasharray:0 360; 

     stroke-dashoffset:0; 

     animation:mymove 2s infinite; 
} 

@keyframes mymove { 
     0%{ 
     fill:tomato; 
     } 
     100%{ 
     fill:tomato; 
     stroke-dasharray:360 0; 
     stroke-dashoffset:10; 
     } 
}