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

Question

我创建了一个锚链接按钮，当我在:focus状态下单击按钮时，我想在其中显示Spinner动画 。 我正在使用Font Awesome来显示动画，但是当我单击按钮时，微调器动画不起作用。

注意：我不想在这里使用JavaScript，而只是想使用Pure CSS

这是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

变换应该仅在块级元素（包括inline-block ）上起作用。 将伪元素设为display:inline-block使动画起作用。

在对问题进行评论后，我确实看到动画在Chrome v43中也无法在Chrome v50（dev-m）中运行。 因此，目前的行为似乎是一致的

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