SOLO CSS Animazione Disegna il cerchio con il raggio di bordo e lo sfondo trasparente

Sto provando a disegnare un cerchio con il raggio del bordo e ad animarlo. Posso farlo, ma ciò che non posso fare è sovrapporre gli elementi e impostare lo sfondo dei cerchi in modo trasparente, senza hide la maschera. Non sono in grado di renderlo trasparente sugli elementi perché è necessario applicare la maschera per hide la metà sinistra del cerchio mentre ruota per simulare l’effetto di disegno.

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/

Nel mio esempio, ho bisogno di cambiare lo sfondo blu in trasparente, senza scoprire il raggio del bordo prima che inizi a ruotare.

Scusa i colors, non sono ciò con cui lavorerò, ma fornisco un approccio più chiaro al problema.

Questo è il mio prodotto temporaneo in cui devo rimuovere il disegno per realizzare la trasparenza. http://jsfiddle.net/BuzzSmarter/gmvban4p/