html - 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;
        }
}