旋转器为什么不旋转/旋转？

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>