Creating this rotation CSS3 animation rotates only once

Question

I'm trying to animate a pie chart that rotates from 0 degrees to whatever degree I want it to end (say 300 degrees, it doesn't matter). There is a circle with one that rotates from above. At the moment, the pie chart rotates 360 degrees, and then ends with a final degree (in this case 300). Now it works only in Chrome.

Jsfiddle

My HTML:

<div class="spinner"> <span><em></em></span> <span><em></em></span> </div> 

My CSS:

 .spinner { width: 250px; height: 250px; background: #aaa; margin: 0 auto; position: relative; } .spinner:after { position: absolute; content: ""; width: 0%; height: 0%; border-radius: 100%; background: #fff; top: 10%; left: 10%; } .spinner span em { background: #0e728e; -webkit-animation-duration: 6s; } @-webkit-keyframes rotate-rt { 0% { -webkit-transform: rotate(0deg); } 25% { -webkit-transform: rotate(180deg); } 100% { -webkit-transform: rotate(180deg); } } @-webkit-keyframes rotate-lt { 0% { -webkit-transform: rotate(0deg); } 25% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(120deg); } 100% { -webkit-transform: rotate(120deg); } } .spinner { border-radius: 100%; position: relative; } .spinner span { width: 50%; height: 100%; overflow: hidden; position: absolute; } .spinner span:first-child { left: 0; } .spinner span:last-child { left: 50%; } .spinner span em { border-radius: 250px; position: absolute; width: 100%; height: 100%; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: forwards; } .spinner span:first-child em { left: 100%; border-top-left-radius: 0; border-bottom-left-radius: 0; -webkit-animation-name: rotate-lt; -webkit-transform-origin: 0 50%; } .spinner span:last-child em { left: -100%; border-top-right-radius: 0; border-bottom-right-radius: 0; -webkit-animation-name: rotate-rt; -webkit-transform-origin: 100% 50%; } 

Answer 1

It was a bit complicated, because there really are two circles. You really want one (rotate-rt) to stop halfway and the other (rotate-lt) to continue the remaining 120 degrees (a total of 300 degrees):

 @-webkit-keyframes rotate-rt { 0% { -webkit-transform: rotate(0deg); } 25% { -webkit-transform: rotate(180deg); } 100% { -webkit-transform: rotate(180deg); } } @-webkit-keyframes rotate-lt { 0% { -webkit-transform: rotate(0deg); } 25% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(120deg); } 100% { -webkit-transform: rotate(120deg); } } 

http://jsfiddle.net/BkJY7/7/

Edit: To clarify, if you want this rotation to be less than 180 degrees, you would completely remove the second animation keyframe rule: http://jsfiddle.net/BkJY7/8/

Answer 2

You are looking for -webkit-animation-fill-mode: forwards; which stops the animation at the end. You can read more about this here: Unable to stop animation at the end of one cycle