Warum dreht/dreht sich der Spinner nicht?

Question

Ich habe eine Anker Link-Taste erstellt, wo ich Spinner Animation zeigen möchte, wenn ich auf Schaltfläche in :focus Zustand klicken. Ich benutze Font Awesome, um Animation anzuzeigen, aber wenn ich auf die Schaltfläche klicke, funktioniert die Spinner-Animation nicht.

Hinweis: Ich will nicht JavaScript verwenden, hier wollen nur mit Reines CSS

hier zu tun ist, um die CodePen Link 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

Transformationen sollen nur auf Blockelemente (einschließlich inline-block) funktionieren. Wenn das Pseudo-Element display:inline-block wird, funktioniert die Animation.

Nachdem ich die Frage kommentiert habe, habe ich gesehen, dass die Animation in Chrome v50 (dev-m) nicht funktionierte, obwohl sie in Chrome v43 funktionierte. So scheint das aktuelle Verhalten konsistent

@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>