旋轉器為什么不旋轉/旋轉？

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>