Why is the spinner not spinning/rotating? - html

Question

I have created a anchor link button where I want to show Spinner animation when I click on button in :focus state. I'm using Font Awesome to show animation but when I click on the button, the spinner animation is not working.
Note: I don't want to use JavaScript here just want to do with Pure
CSS
Here is the 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

Transforms are supposed to work only on block level elements (including inline-block). Making the pseudo-element as display:inline-block makes the animation work.
After commenting on the question, I did see that the animation wasn't working in Chrome v50 (dev-m) also while it was working in Chrome v43. So, the current behavior seems to be consistent
#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>