CSS SOLAMENTE Animate Draw Circle con radio de borde y fondo transparente

Estoy tratando de dibujar un círculo con radio de borde y animarlo. Puedo hacer esto, pero lo que no puedo hacer es superponer elementos y establecer el fondo de círculos en transparente, sin mostrar la máscara. No puedo hacerlo transparente sobre los elementos porque la máscara debe aplicarse para ocultar la mitad izquierda del círculo mientras gira para imitar el efecto de extracción.

HTML

CSS

 .background{ background:green; z-index: 1000; } .wrapper { width: 250px; height: 250px; position: relative; margin: 40px auto; background: rgba(0,0,255,1); } .wrapper, .wrapper * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .wrapper .pie { width: 50%; height: 100%; transform-origin: 100% 50%; position: absolute; background: transparent; border: 5px solid rgba(0,0,0,0.9); } .wrapper .spinner { border-radius: 100% 0 0 100% / 50% 0 0 50%; z-index: 0; border-right: none; -webkit-animation: rota 5s linear infinite; } .wrapper:hover .spinner, .wrapper:hover .filler, .wrapper:hover .mask { animation-play-state: running; } .wrapper .filler { border-radius: 0 100% 100% 0 / 0 50% 50% 0; left: 50%; opacity: 0; -webkit-animation: opa 5s steps(1, end) infinite reverse; border-left: none; } .wrapper .mask { width: 50%; height: 100%; position: absolute; background: inherit; opacity: 1; -webkit-animation: opa 5s steps(1, end) infinite; } @-webkit-keyframes rota { 0% {transform: rotate(0deg);border-color:red;} 100% {transform: rotate(360deg);z-index:0;} } @-webkit-keyframes opa { 0% {opacity: 1;} 50%, 100% {opacity: 0;} } 

http://jsfiddle.net/BuzzSmarter/gmvban4p/

En mi ejemplo, necesito cambiar el fondo azul a transparente, sin revelar el radio del borde antes de que comience a girar.

Disculpe los colores, no es con lo que trabajaré, pero proporcione un enfoque más claro sobre el tema.

Este es mi producto temporal donde tengo que eliminar el sorteo para lograr la transparencia. http://jsfiddle.net/BuzzSmarter/gmvban4p/

Esta es mi solución.

Establecí un fondo en el cuerpo para mostrar que es transparente

 body { background: repeating-linear-gradient(45deg, white 0px, lightblue 100px); height: 500px; background-size: 500px 500px; background-repeat: no-repeat; } html { height: 100%; } #container { position: absolute; width: 400px; height: 400px; border: solid red 1px; animation: colors 4s infinite; } #halfclip { width: 50%; height: 100%; right: 0px; position: absolute; overflow: hidden; transform-origin: left center; animation: cliprotate 16s steps(2) infinite; -webkit-animation: cliprotate 16s steps(2) infinite; } .halfcircle { box-sizing: border-box; height: 100%; right: 0px; position: absolute; border: solid 25px transparent; border-top-color: blue; border-left-color: blue; border-radius: 50%; } #clipped { width: 200%; animation: rotate 8s linear infinite; -webkit-animation: rotate 8s linear infinite; } #fixed { width: 100%; transform: rotate(135deg); animation: showfixed 16s steps(2) infinite; -webkit-animation: showfixed 16s linear infinite; } @-webkit-keyframes cliprotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } @keyframes cliprotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } @-webkit-keyframes rotate { 0% {transform: rotate(-45deg);} 100% {transform: rotate(135deg);} } @keyframes rotate { 0% {transform: rotate(-45deg);} 100% {transform: rotate(135deg);} } @-webkit-keyframes showfixed { 0% {opacity: 0;} 49.9% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 1;} }