CODEWITHSUNDEEP
htmlcsssvg
robert
robert

Reputation: 125

svg animation wrong way

I currently have this: 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;
    }
}

I was wondering how I could 'reverse' the animation,
Now it removes the green part, but I want it to create the green part.
So.. it should start without a border, and create the green border instead of starting with the border and removing the border.

Upvotes: 1

Views: 380

Answers (1)

Shamanth
Shamanth

Reputation: 216

Use this,

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

Upvotes: 1

Related Questions