Ruota solo il bordo usando i CSS

Question

Sto provando a ruotare solo il bordo usando css ma anche l'icona del carattere sta ruotando. Come posso interrompere la rotazione dell'icona e creare solo il bordo?

CSS:

.circle { 
    width: 100px; 
    height: 100px; 
    background: transparent; 
    border-radius: 50%; 
    border: 2px dashed #000; 
-webkit-animation-name: Rotate; 
-webkit-animation-duration: 2s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear; 
-moz-animation-name: Rotate; 
-moz-animation-duration: 2s; 
-moz-animation-iteration-count: infinite; 
-moz-animation-timing-function: linear; 
-ms-animation-name: Rotate; 
-ms-animation-duration: 2s; 
-ms-animation-iteration-count: infinite; 
-ms-animation-timing-function: linear; 
} 
.play { 
padding: 20px 30px; 
font-size: 56px; 
} 

@-webkit-keyframes Rotate 
{ 
from{-webkit-transform:rotate(0deg);} 
to{-webkit-transform:rotate(360deg);} 
} 
@-moz-keyframes Rotate 
{ 
from{-moz-transform:rotate(0deg);} 
to{-moz-transform:rotate(360deg);} 
} 
@-ms-keyframes Rotate 
{ 
from{-ms-transform:rotate(0deg);} 
to{-ms-transform:rotate(360deg);} 
} 

HTML:

<div class="circle"> 
    <div class="play"><i class="fa fa-play"></i></div> 
</div> 

Dove sto andando male con questo codice?

DEMO JSFIDDEL

Answer 1

genitore rotazione ruoterà bambino così così è meglio confine di stile a parte come qui

.circle { 
 
    width: 100px; 
 
    height: 100px; 
 
    position: relative; 
 
} 
 
.circle .border { 
 
    /* content: ''; */ 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: transparent; 
 
    border-radius: 50%; 
 
    border: 2px dashed #000; 
 
    -webkit-animation-name: Rotate; 
 
    -webkit-animation-duration: 2s; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-timing-function: linear; 
 
    -moz-animation-name: Rotate; 
 
    -moz-animation-duration: 2s; 
 
    -moz-animation-iteration-count: infinite; 
 
    -moz-animation-timing-function: linear; 
 
    -ms-animation-name: Rotate; 
 
    -ms-animation-duration: 2s; 
 
    -ms-animation-iteration-count: infinite; 
 
    -ms-animation-timing-function: linear; 
 
} 
 
.play { 
 
    padding: 20px 30px; 
 
    font-size: 56px; 
 
} 
 
.stop { 
 
    font-size: 12px; 
 
    padding: 30px; 
 
    text-align: center; 
 
} 
 
@-webkit-keyframes Rotate { 
 
    from { 
 
    -webkit-transform: rotate(0deg); 
 
    } 
 
    to { 
 
    -webkit-transform: rotate(360deg); 
 
    } 
 
} 
 
@-moz-keyframes Rotate { 
 
    from { 
 
    -moz-transform: rotate(0deg); 
 
    } 
 
    to { 
 
    -moz-transform: rotate(360deg); 
 
    } 
 
} 
 
@-ms-keyframes Rotate { 
 
    from { 
 
    -ms-transform: rotate(0deg); 
 
    } 
 
    to { 
 
    -ms-transform: rotate(360deg); 
 
    } 
 
}

<div class="circle"> 
 
    <div class="border"></div> 
 
    <div class="play"><i class="fa fa-play"></i> 
 
    </div> 
 
</div> 
 

 
<p> 
 
    PS: The icon loading is a bit slow. Wait until it shows up. 
 
</p> 
 

 
<div class="circle"> 
 
    <div class="border"></div> 
 
    <div class="stop">Stop me please</div> 
 
</div>

Answer 2

<div class="button-container"> 
    <i class="fa fa-play button-icon"></i> 
    <div class="button-border"></div> 
</div> 

Si può trovare una versione aggiornata del vostro campione qui JSFiddle