Perché lo spinner non gira/ruota?

Question

Ho creato un pulsante di collegamento di ancoraggio dove voglio mostrare l'animazione Spinner quando faccio clic sul pulsante nello stato :focus. Sto usando Font Awesome per mostrare l'animazione ma quando clicco sul pulsante, l'animazione di spinner non funziona.

Nota: Non voglio usare JavaScript qui vogliono solo a che fare con Pure CSS

Ecco il link CodePen https://codepen.io/rhulkashyap/pen/vLPNdQ

@import url(https://fonts.googleapis.com/css?family=Titillium+Web); 
 
body { 
 
    font-family: 'Titillium Web', sans-serif; 
 
    text-align: center; 
 
} 
 
#button { 
 
    padding: 15px; 
 
    background-color: green; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    border-radius: 5px; 
 
    width: 300px; 
 
    display: inline-block; 
 
    text-align: center; 
 
    font-size: 25px; 
 
    -webkit-transition: all .3s ease-in-out; 
 
    transition: all .3s ease-in-out; 
 
} 
 
#button:before { 
 
    content: "\f090"; 
 
    font-family: FontAwesome; 
 
    margin-right: 5px; 
 
} 
 
#button:focus { 
 
    background-color: #02b402; 
 
} 
 
#button:focus:before { 
 
    content: "\f1ce"; 
 
    -webkit-animation: spin .8s ease infinite; 
 
    animation: spin .8s ease infinite; 
 
} 
 
@-webkit-keyframes spin { 
 
    from { 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    to { 
 
    -webkit-transform: rotate(359deg); 
 
    transform: rotate(359deg); 
 
    } 
 
} 
 
@keyframes spin { 
 
    from { 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    to { 
 
    -webkit-transform: rotate(359deg); 
 
    transform: rotate(359deg); 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<h2> Click Here</h2> 
 
<a id="button" href="javascript:void(0)">Enter In</a>

Answer 1

Le trasformazioni devono funzionare solo su elementi a livello di blocco (incluso inline-block). Realizzare lo pseudo-elemento come display:inline-block fa funzionare l'animazione.

Dopo aver commentato la domanda, ho visto che l'animazione non funzionava in Chrome v50 (dev-m) anche mentre funzionava in Chrome v43. Così, il comportamento attuale sembra essere coerente

@import url(https://fonts.googleapis.com/css?family=Titillium+Web); 
 
body { 
 
    font-family: 'Titillium Web', sans-serif; 
 
    text-align: center; 
 
} 
 
#button { 
 
    padding: 15px; 
 
    background-color: green; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    border-radius: 5px; 
 
    width: 300px; 
 
    display: inline-block; 
 
    text-align: center; 
 
    font-size: 25px; 
 
    -webkit-transition: all .3s ease-in-out; 
 
    transition: all .3s ease-in-out; 
 
} 
 
#button:before { 
 
    display: inline-block; 
 
    content: "\f090"; 
 
    font-family: FontAwesome; 
 
    margin-right: 5px; 
 
} 
 
#button:focus { 
 
    background-color: #02b402; 
 
} 
 
#button:focus:before { 
 
    content: "\f1ce"; 
 
    -webkit-animation: spin .8s ease infinite; 
 
    animation: spin .8s ease infinite; 
 
} 
 
@-webkit-keyframes spin { 
 
    from { 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    to { 
 
    -webkit-transform: rotate(359deg); 
 
    transform: rotate(359deg); 
 
    } 
 
} 
 
@keyframes spin { 
 
    from { 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    to { 
 
    -webkit-transform: rotate(359deg); 
 
    transform: rotate(359deg); 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<h2> Click Here</h2> 
 
<a id="button" href="javascript:void(0)">Enter In</a>