Apenas para CSS Animate Draw Circle com raio de fundo e fundo transparente

Eu estou tentando desenhar um círculo com raio de borda e animá-lo. Eu posso fazer isso, mas o que eu não posso fazer é sobrepor elementos e definir o plano de fundo de círculos como transparente, sem mostrar a máscara. Não consigo torná-lo transparente sobre os elementos porque a máscara precisa ser aplicada para ocultar a metade esquerda do círculo à medida que ele gira para imitar o efeito de desenho.

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/

No meu exemplo, preciso alterar o plano de fundo azul para transparente, sem exibir o raio da borda antes de começar a girar.

Desculpe as colors, não é com isso que vou trabalhar, mas forneço uma abordagem mais clara do problema.

Este é o meu produto temporário, onde tenho que remover o sorteio para realizar a transparência. http://jsfiddle.net/BuzzSmarter/gmvban4p/

    Esta é minha solução.

    Eu coloquei um fundo no corpo para mostrar que é 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;} }