Animating a radial pie chart using CSS3 animations

HTML & CSS
1

I’m trying to animate a radial pie to display a skill for a website I’m doing. Each skill will animate from 0% to either 10%, 20%, so on and so forth with increments of 10 of the full pie. I’m doing this with CSS3 animations and as you can see from this pen on Codepen, the pie starts at 50% filled and goes to 90% filled (or whatever percent I declare in the markup using the animation state). I want the pie to start at 0% of course and end at 90%. When it’s at 0% (the beginning of the animation), it’s supposed to show none of the pie filled, and when it’s at 90%, it of course fills 90% of the pie.

For instance, here is the keyframe for the 90% animation state:

 /* Animate to 90% of full skill pie */
@include keyframes (fill90Percent) {
    from     { @include transform(rotate(0deg)); }
    to       { @include transform(rotate(324deg)); }
}

I am pretty close, but I feel like I’m missing something pretty obvious. If someone can steer me in the right direction, I would appreciate it.

2

Hi,

A bit late to the party but maybe something like this will help. It’s a little simpler than yours but achieves the effect I think you wanted (unless you wanted the actual pie section to show).

The first pie rotates from 0 180 and then you rotate the second pies parent by 180 to start with and again have the childt rotate from 0 to 180 but after the other one has finished. So for sections from 0 to 180 you just use the first pie but for sections greater than 180 use both pies.